text-orientation

Avatar of Jwahir Sundai
Jwahir Sundai

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-verticalglyph-orientation-horizontalglyph-orientation-vertical 现在是 text-orientation 的别名。

浏览器支持

此浏览器支持数据来自 Caniuse,它提供了更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
48417910.1*

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712710.0-10.2

演示

规范

更多信息