一般地,正常网页文本方向都是从上到下,从左到右。实际上,有多种设置文本方向的属性,置文本方向的CSS样式有direction、unicode-bidi等方法。本文将详细介绍网页文本方向的设置方法。
css设置文字方向的方法如下:
1、使用direction属性设置文字方向
direction是设置文本方向的CSS样式
值: ltr | rtl | inherit
初始值: ltr
应用于: 所有元素
继承性: 有
[注意]想让direction样式在inline元素上起作用,需要unicode-bidi样式的相关设置
[注意]设置direction样式时,HTML元素的全局属性dir无效
示例:
div.one
{
direction: rtl
}
div.two
{
direction: ltr
}
效果图:
2、使用unicode-bidi属性设置文字方向
unicode-bidi是一种更健壮的处理文本方向的方式
值: normal | embed | bidi-override | isolate | isolate-override | plaintext | inherit
初始值: normal
应用于: 所有元素
继承性: 无
[注意]unicode-bidi属性应用于flex弹性盒模型上有问题,除非伸缩容器只包含一个匿名伸缩项目时有效,其余情况都无效
[注意]isolate、isolate-override、plaintext是实验属性值,几乎没有浏览器支持//display:inline-block/block
normal/embed: 456 23 1
bidi-override: 654 32 1
//display:inline
normal:1 23 456
embed: 456 23 1
bidi-override: 654 32 1