1. 首页
  2. css

CSS文本方向

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
– 适用于:除表行组、行、列组以外的所有元素,列
– 继承:是
– 百分比:不适用
– 计算值:指定值
– 动画类型:不可设置动画
– 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,其中有更多详细信息。一个数字表示浏览器支持该版本及更高版本的功能。桌面CodePen Embed FallbackSpecification
– CSS Writing Modes Level 3(Editor\”s draft)
– ?Nikhil-对text-orientation和writing-mode的详细解释。使用Adi Purdila的\”writing mode\”CSS属性轻松创建横向文本-除了使用text-orientation之外,还探索不同的方法。使用W.S.Toh在CSS中创建垂直文本的2种方法-使用writing-mode和text-orientation.
– 文本旋转(Chris Coyier)-使用transform代替writing-mode或text-orientation.相关属性年鉴onMar 29,2021年方向.element { direction: rtl; }

CSS文本方向 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%96%87%e6%9c%ac%e6%96%b9%e5%90%91/