CSS文本方向，css文本

CSS文本方向，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)

　　繼承性: 有

//left: 1 23 456//right: 1 23 456

 

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

//ltr: 1 23 456//rtl: 456 23 1

 

direction

　　direction是設定文本方向的CSS樣式

　　值: ltr | rtl | inherit

　　初始值: ltr

　　應用於: 所有元素

　　繼承性: 有

　　[注意]想讓direction樣式在inline元素上起作用，需要unicode-bidi樣式的相關設定

　　[注意]設定direction樣式時，HTML元素的全域屬性dir無效

ltr: 從左至右(left to right)rtl: 從右至左(right to left)

//ltr: 1 23 456//rtl: 456 23 1

 

unicode-bidi

　　unicode-bidi是一種更健壯的處理文本方向的方式

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

　　初始值: normal

　　應用於: 所有元素

　　繼承性: 無

　　[注意]unicode-bidi屬性應用於flex彈性盒模型上有問題，除非伸縮容器只包含一個匿名伸縮項目時有效，其餘情況都無效

　　[注意]isolate、isolate-override、plaintext是實驗屬性值，幾乎沒有瀏覽器支援

//display:inline-block/blocknormal/embed: 456 23 1bidi-override: 654 32 1//display:inlinenormal:1 23 456embed: 456 23 1bidi-override: 654 32 1

　　[注意]只有當dir為rtl或direction為rtl時，unicode-bidi屬性才起作用