text-orientation - CSS（层叠样式表） 编辑

text-orientation CSS 属性设定行中字符的方向。但它仅影响纵向模式（当 writing-mode 的值不是horizontal-tb）下的文本。此属性在控制使用竖排文字的语言的显示上很有作用，也可以用来构建垂直的表格头。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

语法

/* 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: unset;

text-orientation 应当被设置为上述关键字之一。

值

mixed

默认值。顺时针旋转水平书写的字符90°，将垂直书写的文字自然布局。

upright

将水平书写的字符自然布局（直排），包括垂直书写的文字（as well as the glyphs for vertical scripts）。注意这个关键字会导致所有字符被视为从左到右，也就是 direction 被强制设为 ltr。

sideways

所有字符被布局为与水平方式一样，但是整行文本被顺时针旋转90°。

sideways-right

处于兼容目的，sideways 的别名。

use-glyph-orientation

对于SVG元素，这个关键字导致使用已弃用的SVG属性。 glyph-orientation-vertical 和 glyph-orientation-horizontal。

形式化定义

初始值	mixed
适用元素	all elements, except table row groups, rows, column groups, and columns
是否是继承属性	yes
计算值	as specified
Animation type	discrete

形式化语法

mixed | upright | sideways

例子

HTML

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

CSS

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

结果

规范

Specification	Status	Comment
CSS Writing Modes Module Level 3 text-orientation	Proposed Recommendation	Initial definition.

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• The other vertical-script related CSS properties: writing-mode, text-combine-upright, and unicode-bidi.
• CSS Logical properties
• Styling vertical text (Chinese, Japanese, Korean and Mongolian)
• Extensive browsers support test results: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html