【CSS】writing-mode 控制文字排列方式，电子应援板必用属性

• #css

writing-mode 控制文字是从左到右横着写，还是从上到下竖着写。有五个可选值：

1. horizontal-tb (默认值)：文字从左到右横着排列，从上往下换行。

   窗前明月光， 疑是地上霜。

2. vertical-rl：文字从上到下竖着排列，从右往左换行。这就像古代的书籍排版。

   窗前明月光， 疑是地上霜。

3. vertical-lr：文字从上到下竖着排列，从左往右换行。

   窗前明月光， 疑是地上霜。

4. sideways-rl：文字从右到左竖向排列，所有字符旋转 90 度，侧躺着，头朝右。

   窗前明月光， 疑是地上霜。

5. sideways-lr：文字从左到右竖向排列，所有字符旋转 90 度，看起来像是侧躺着，头朝左。

   窗前明月光， 疑是地上霜。

writing-mode 有个很实用的场景就是电子应援板，如下图，手机默认是竖屏，设置 writing-mode: sideways-rl; 文字竖着排列，并且每个文本旋转了90°，这样我们把手机横过来就有一个很好的展示效果了。电子应援板

↶ 返回首页 ↶