---

CSS writing-mode 属性

介绍

CSS writing-mode 属性定义了文本内容的垂直或水平排列方式。通俗地说，它指定了文本如何“流动”（flow）。

这里的“垂直”并不一定指“竖着”的，它也可以是英文和数字水平排列的书写方式。

取值

CSS writing-mode 取值包括：

• horizontal-tb：从左到右、从上到下排列，即水平排列；
• vertical-rl：从上到下、从右到左排列，即垂直排列，且从右侧开始写入；
• vertical-lr：从上到下、从左到右排列，即垂直排列，且从左侧开始写入。

使用场景

writing-mode 属性一般用来定义一些非常规排版的场景，例如：

• 实现竖写中文/日文；
• 实现文本从右到左书写，如阿拉伯语；
• 实现书写大写拼音/英文全大写等排版方式。

示例

1. 水平排列

在默认的情况下，文本是水平排列的。例如：

<div>这是一段文本，正常的排列方式</div>

div {
  writing-mode: horizontal-tb;
}

上述代码会将文本呈现为从左到右、从上到下的水平方向。

2. 垂直排列

下面的代码会使文本从右到左垂直排列：

<div>这是一段垂直排列的文本，从右侧开始书写</div>

div {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

这时，文本从右到左从上到下排列，因为 text-orientation：upright 的设置，每个字都是正立的。

如果希望文本从左到右排列，则可以使用 vertical-lr：

<div>这是一段垂直排列的文本，从左侧开始书写</div>

div {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

3. 竖写

在中、日文中，文本往往是从上到下排列的。下面的 CSS 可以实现这一效果：

<div>这是一段竖写的中文</div>

div {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;
}

其中，font-family 属性用来指定字体族。

注意事项

• 不是所有浏览器都支持 writing-mode 属性；
• 字体本身是否支持竖排往往也是要考虑的因素；
• 对于较长的垂直文本，为保证可阅读性，建议对换行进行更加精确的控制。