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

在正常流中，文本都是从左往右、自上而下排列显示，如果想要改变排列方向的话，可以通过CSS属性来改变。

1. text-align属性

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

// 可选值: left(靠左、默认),center(居中),right(靠右)

.txt { text-align: right; }

1. writting-mode属性

书写模式(writting-mode)可改变文本在垂直上的方向；

// 可选值: horizontal-tb(水平、默认),vertical-lf(垂直、从左往右),vertical-rl(垂直、从右往左)

.txt { writting-mode: vertical-lr; }

1. direction属性

文本方向(direction)表示文本内部的排列方向，与HTML的全局属性dir一致；

// 可选值: ltr(从左往右、默认),rtl(从右往左)

// 当1 23 45为rtl时，显示45 23 1

.txt { direction: rtl; }

PS：内联元素rtl时，需与unicode-bidi属性使用

1. 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; }