处理文字排列

TIP

有些时候排版中可能有涉及到文字排列，比如：竖排文字、横排文字等。正好CSS属性中就有一个属性可以处理文字排列，那就是writing-mode属性。可能用的比较少（其实在一些诗词就用得上了）。

writing-mode：文字流动方向

css

/* 1. 默认水平排列：从左到右，从上到下 */
.horizontal-text {
  writing-mode: horizontal-tb;
}

/* 2. 垂直排列：从上到下，从右到左（传统竖排） */
.vertical-text-rl {
  writing-mode: vertical-rl;
}

/* 3. 垂直排列：从上到下，从左到右（现代竖排） */
.vertical-text-lr {
  writing-mode: vertical-lr;
}

/* 1. 默认水平排列：从左到右，从上到下 */
.horizontal-text {
  writing-mode: horizontal-tb;
}

/* 2. 垂直排列：从上到下，从右到左（传统竖排） */
.vertical-text-rl {
  writing-mode: vertical-rl;
}

/* 3. 垂直排列：从上到下，从左到右（现代竖排） */
.vertical-text-lr {
  writing-mode: vertical-lr;
}

注意

1.垂直排版可能会影响布局计算，需要注意盒模型

2.部分属性需要添加浏览器前缀

3.垂直排版对中文、日文、韩文支持较好，英文可能需要特殊处理

处理文字排列 ​

writing-mode：文字流动方向 ​

处理文字排列

writing-mode：文字流动方向