CSS文本方向 - 小火柴的蓝色理想

×

目录

[1]text-align [2]writing-mode [3]dir[4]direction[5]unicode-bidi

前面的话

　　一般地，正常网页文本方向都是从上到下，从左到右。实际上，有多种设置文本方向的属性，前面已经详细介绍过text-align，HTML全局属性中有一个"dir"属性就是专门用来设置文本方向的，设置文本方向的CSS样式有direction、unicode-bidi和writing-mode。本文将详细介绍网页文本方向的设置方法

 

text-align

　　水平对齐实现上影响的是一个元素中的文本的水平对齐方式，关于text-align的详细信息移步至此

　　值: left | center | right | justify | inherit

　　初始值: left

　　应用于: 块级元素(包括block和inline-block)

　　继承性: 有

<span style="color: #008000;">//</span><span style="color: #008000;">left: 1 23 456
</span><span style="color: #008000;">//</span><span style="color: #008000;">right: 1 23 456</span>

 

writing-mode

　　writing-mode原先是IE的私有属性，原先的属性是lr-tb(左-右，上-下)和tb-rl(上-下，右-左)。其中writing-mode:tb-rl常用于触发haslayout。但W3C将writing-mode属性标准化后，其属性值也发生了变化

　　值: horizontal-tb | vertical-rl | vertical-lr

　　初始值: horizontal-tb

　　应用于: 除表格类元素之外的所有元素

　　继承性: 有

　　[注意]safari和移动端IOS和android需要添加-webkit-前缀；IE浏览器只支持自己的私有属性值

　　[注意]设置writing-mode时，text-align属性失效

 

dir

　　dir是HTML的全局属性，专门用来设置文本的方向

　　值: ltr | rtl | auto

<span style="color: #008000;">//</span><span style="color: #008000;">ltr: 1 23 456
</span><span style="color: #008000;">//</span><span style="color: #008000;">rtl: 456 23 1</span>

 

direction

　　direction是设置文本方向的CSS样式

　　值: ltr | rtl | inherit

　　初始值: ltr

　　应用于: 所有元素

　　继承性: 有

　　[注意]想让direction样式在inline元素上起作用，需要unicode-bidi样式的相关设置

　　[注意]设置direction样式时，HTML元素的全局属性dir无效

<span style="color: #000000;">ltr: 从左到右(left to right)
rtl: 从右到左(right to left)</span>

<span style="color: #008000;">//</span><span style="color: #008000;">ltr: 1 23 456
</span><span style="color: #008000;">//</span><span style="color: #008000;">rtl: 456 23 1</span>

 

unicode-bidi

　　unicode-bidi是一种更健壮的处理文本方向的方式

　　值: normal | embed | bidi-override | isolate | isolate-override | plaintext | inherit

　　初始值: normal

　　应用于: 所有元素

　　继承性: 无

　　[注意]unicode-bidi属性应用于flex弹性盒模型上有问题，除非伸缩容器只包含一个匿名伸缩项目时有效，其余情况都无效

　　[注意]isolate、isolate-override、plaintext是实验属性值，几乎没有浏览器支持

<span style="color: #008000;">//</span><span style="color: #008000;">display:inline-block/block</span>
normal/embed: <span style="color: #800080;">456</span> <span style="color: #800080;">23</span> <span style="color: #800080;">1</span><span style="color: #000000;">
bidi</span>-<span style="color: #0000ff;">override</span>: <span style="color: #800080;">654</span> <span style="color: #800080;">32</span> <span style="color: #800080;">1</span>

<span style="color: #008000;">//</span><span style="color: #008000;">display:inline</span>
normal:<span style="color: #800080;">1</span> <span style="color: #800080;">23</span> <span style="color: #800080;">456</span><span style="color: #000000;">
embed: </span><span style="color: #800080;">456</span> <span style="color: #800080;">23</span> <span style="color: #800080;">1</span><span style="color: #000000;">
bidi</span>-<span style="color: #0000ff;">override</span>: <span style="color: #800080;">654</span> <span style="color: #800080;">32</span> <span style="color: #800080;">1</span>

　　[注意]只有当dir为rtl或direction为rtl时，unicode-bidi属性才起作用