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

你可能感兴趣的:(CSS文本相关之水平排列[4])