DigitalOcean 为您旅程的每个阶段提供云产品。从 200 美元的免费信用开始!
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
的别名。
浏览器支持
此浏览器支持数据来自 Caniuse,它提供了更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
48 | 41 | 否 | 79 | 10.1* |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 10.0-10.2 |
演示
规范
- 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
的垂直文本方法。