CSS 中的 text-orientation 属性在使用垂直 writing-mode 时对齐一行中的文本。基本上，它将该行顺时针旋转 90°，以帮助控制垂直语言的显示方式 - 类似于 text-combine-upright 在垂直脚本中旋转一行文本中的字符组的方式，但它用于整行文本。

.element {
  text-orientation: mixed;
  writing-mode: vertical-rl; 
}

要处理双向文本（例如包含从左到右和从右到左的文本的块），请查看 unicode-bidi 属性。它与 direction 属性结合使用以覆盖浏览器决定如何显示文本的方式。

语法

text-orientation: mixed | upright | sideways

• 初始值： mixed
• 应用于：除表格行组、行、列组和列之外的所有元素
• 继承：是
• 百分比：无
• 计算值：指定值
• 动画类型：不可动画

值

/* Keyword values */
text-orientation: mixed; /* default */
text-orientation: upright;
text-orientation: sideways;
text-orientation: sideways-right;

/* Global values */
text-orientation: inherit;
text-orientation: initial; /* mixed */
text-orientation: unset;

• mixed: 默认值。水平脚本中的字符顺时针旋转 90°。垂直脚本中的字符以其自然的垂直方向显示。
• upright: 水平脚本中的字符以其自然的水平直立位置设置，包括一些字形。因此，垂直书写模式可能会旋转一行文本，使字符侧向显示，此值将使字符本身旋转 90° 到其自然位置。请注意，此值强制 direction 属性的值为 ltr，这意味着所有字符都将被视为左到右书写模式。
• sideways: 垂直书写模式中的所有文本都以侧向方式显示，就像它在水平布局中一样，但整行顺时针旋转 90°。
• sideways-right: 一些浏览器将此值视为 sideways 值的别名，为了向后兼容性而保留。

use-glyph-orientation 在 2015 年 12 月作为关键字值被删除。它用于 SVG 元素以定义现在已弃用的 SVG 属性 glyph-orientation-vertical 和 glyph-orientation-horizontal。glyph-orientation-vertical 现在是 text-orientation 的别名。

浏览器支持

演示

规范

• CSS 书写模式级别 3（编辑草案）

更多信息

• 为什么垂直文本方向是跨浏览器兼容性的噩梦？ 由 Nikhil 撰写 - 对 text-orientation 和 writing-mode 的详细解释。
• 使用“writing-mode” CSS 属性轻松创建侧向文本 由 Adi Purdila 撰写 - 除了使用 text-orientation 之外，探索不同的方法。
• 在 CSS 中创建垂直文本的两种方法 由 W.S. Toh 撰写 - 使用 writing-mode 和 text-orientation 的方法之间的更直接比较。
• 文本旋转 由 Chris Coyier 撰写 - 使用 transform 而不是 writing-mode 或 text-orientation 的垂直文本方法。

相关属性