文字方向 | text-orientation
text-orientation CSS属性定义行内文本字符的方向。此属性仅在垂直模式下有效，即writing-mode不是horizontal-tb。这对控制使用垂直脚本的语言的显示以及制作垂直表头是很有用的。
/* 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;Initial value | mixed |
|---|---|
Applies to | all elements, except table row groups, rows, column groups, and columns |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
该text-orientation属性可取值如下：
可能值
mixed——将水平脚本的字符旋转90°。自然地表现垂直脚本的特征。默认值。
upright——自然地表现（竖直）水平脚本的字符以及垂直脚本的字形。请注意，此关键字会使所有字符被视为从左到右：使用的值direction被强制为ltr。
sideways——使字符按照水平放置的方式布置，但如果writing-mode是vertical-rl，则整行再向右旋转90°；如果writing-mode是vertical-lr，则整行向左旋转90°。为了兼容性而保留了sideways的别名sideways-right。
use-glyph-orientation——在SVG元素上，这个关键字会导致使用过时的SVG属性值glyph-orientation-vertical和glyph-orientation-horizontal。
形式语法
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 3The definition of 'text-orientation' in that specification. | Candidate Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
Basic support | (Yes) -webkit 48.0 (unprefixed) | 41 (41)1 | No support | (Yes) -webkit | No support |
sideways | No support | 44 (44)2 | No support | No support | No support |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
Basic support | No support | 48.0 | 48.0 | 41.0 (41)1 | No support | No support | No support |
sideways | No support | No support | No support | 44.0 (44)2 | No support | No support | No support |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
