text-orientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

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: 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-verticalglyph-orientation-horizontal

形式化定义

初始值mixed
适用元素all elements, except table row groups, rows, column groups, and columns
是否是继承属性
计算值as specified
动画类型Not 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;
}

结果

规范

Specification
CSS Writing Modes Level 4
# text-orientation

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-orientation
mixed
sideways
upright

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见