一行 CSS 就能搞定！用 writing-mode 轻松实现文字竖排

背景

在项目开发过程中，会遇到文字竖排（从上到下）的布局形式。通常我们常用的实现方式是：

• 将每个字符单独使用标签包裹，再通过 ​​Flexbox排列​​
• 设置 ​​固定宽度，强制换行​​

在CSS中为我们提供了更优雅、更强大、更语义化的解决方案 —— ​​writing-mode 属性​​，让文字竖排变得 ​​简单、灵活​​。

常规实现方式

我们通常采用以下方式模拟或实现竖排文字效果：

​​字符拆解 + Flexbox布局​​

将每个文字单独放入一个标签（如 <span>），然后使用 Flexbox 垂直排列：

<div class="manual-vertical">
  <span>查</span>
  <span>看</span>
  <span>更</span>
  <span>多</span>
</div>

.manual-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}

​​固定宽度+强制换行​​

使用固定宽度，强制换行的方式实现：

<div class="width">
    查看更多
</div>

.width {
    width: 50px;
    font-size: 50px;
    word-wrap: break-word;
}

展示样式：

writing-mode 方式（一行代码）

什么是 writing-mode？

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

包括：

• 横排（从左到右 或 从右到左）
• 竖排（从上到下，从右到左 或 从左到右）
• 甚至横躺（sideways）

最常用的竖排属性值

属性值	效果描述	适用场景
vertical-rl	竖排，从右向左（​​中文传统排版习惯​​） 对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。	中文诗词、菜单、标题、古籍风格
vertical-lr	竖排，从左向右。对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。	日文、部分特殊排版
horizontal-tb	横排，从上到下（默认值）对于左对齐（ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。	常规英文、中文网页
sideways-rl/sideways-lr	文字横躺（从右到左 / 从左到右）	特殊效果，但兼容性有限

如何使用？

只需要一行 CSS：

.vertical-text {
  writing-mode: vertical-lr;  /* 竖排，从左向右 */
  /* 可选：调整行高、字体、间距等 */
  line-height: 1.8;
  letter-spacing: 2px;
  text-align: center;
}

代码如下：

总结

最后总结一下：如果你正在实现文字竖排效果，​​writing-mode 就是你最好的选择​​。 它不仅让竖排文字变得 ​​像一句 CSS 那么简单​​。只需给你的元素加上 writing-mode: vertical-lr;，就能轻松拥有竖排文字效果。