CSS文本相關之水平排列[4]

• 2020 年 6 月 15 日
• 筆記

在正常流中，文本都是從左往右、自上而下排列顯示，如果想要改變排列方向的話，可以通過CSS屬性來改變。

1. text-align屬性

文本排列(text-align)可改變文本在水平上的方向，但不改變內部的排列方向；

// 可選值: left(靠左、默認),center(居中),right(靠右)
.txt { text-align: right; }

2. writting-mode屬性

書寫模式(writting-mode)可改變文本在垂直上的方向；

// 可選值: horizontal-tb(水平、默認),vertical-lf(垂直、從左往右),vertical-rl(垂直、從右往左)
.txt { writting-mode: vertical-lr; }

3. direction屬性

文本方向(direction)表示文本內部的排列方向，與HTML的全局屬性dir一致；

// 可選值: ltr(從左往右、默認),rtl(從右往左)
// 當1 23 45為rtl時，顯示45 23 1
.txt { direction: rtl; }

PS：內聯元素rtl時，需與unicode-bidi屬性使用

4. unicode-bidi屬性

unicode-bidi可改變上面當1 23 45為rtl時，顯示45 23 1的情況，是對direction屬性的增強；

// 正常：當1 23 45為rtl時，顯示為45 23 1
.txt { unicode-bidi: normal; }
// 嵌入：當1 23 45為rtl時，顯示為45 23 1
.txt { unicode-bidi: embed; }
// 重寫：當1 23 45為rtl時，顯示為54 32 1
.txt { unicode-bidi: bidi-override; }