text-orientation

text-orientation CSS 属性设置文本字符在一行中的方向。它仅影响垂直模式下的文本（当 writing-mode 不是 horizontal-tb 时）。它对于控制使用垂直脚本的语言的显示非常有用，也可以用于制作垂直表格标题。

试一试

语法

css
/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

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

text-orientation 属性指定为以下列表中的单个关键字。

Values

mixed

将水平脚本的字符顺时针旋转 90°。自然地排列垂直脚本的字符。默认值。

upright

自然地排列水平脚本的字符（直立），以及垂直脚本的字形。请注意，此关键字将所有字符视为从左到右：direction 的使用值被强制为 ltr。

sideways

使字符以水平方式排列，但整行顺时针旋转 90°。

sideways-right

sideways 的别名，保留用于兼容性目的。

use-glyph-orientation

在 SVG 元素上，此关键字会导致使用已弃用的 SVG 属性 glyph-orientation-vertical 和 glyph-orientation-horizontal 的值。

正式定义

Initial valuemixed
Applies to所有元素，除了表格行组、行、列组和列
Inheritedyes
Computed valueas specified
Animation typeNot animatable

正式语法

text-orientation = 
  mixed     |
  upright   |
  sideways

示例

HTML

html
<p>Lorem ipsum dolet semper quisquam.</p>

CSS

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

Result

规范

Specification
CSS Writing Modes Level 4
# text-orientation

浏览器兼容性

BCD 表格仅在浏览器中加载

参见