最近项目需要展示古诗，展示效果要求如下：
需要文本竖向排列且需要从右向左排列。需要用到writing-mode 这个 CSS 属性。
writing-mode属性介绍
writing-mode 这个 CSS 属性，感觉是不是很少见，很少用！其实往往是比较 '生僻'，有些时候能起到很大的作用。
实际上 writing-mode 这个属性已经在十多年前就已经存在了，在 IE5.5 浏览器就已经支持了，可以这个属性出来的这么早，资格这么老，为什么沉寂了快 20 年？
是因为，在很长一段时间里，FireFox, Chrome 这些比较常用的浏览器中都不支持 writing-mode, 可以说它就是 IE 的私有产物，又加上我们对 IE 浏览器也没有什么好感。所以就冷落了 writing-mode。
然而，现在前端技术的快速发展，各大浏览器纷纷对 writing-mode 实现了更加标准的支持。
兼容性
先看一下writing-mode的兼容性
writing-mode 语法
-
horizontal-tb 表示，水平方向自上而下的书写方式。(默认方式)
-
vertical-rl 表示文本是垂直方向展示，阅读的顺序是从右往左，跟古诗的阅读顺序一致。
-
vertical-lr 表示文本是垂直方向展示，阅读的顺序还是默认的从左往右，也就仅仅是水平变垂直。
-
lr-tb: 左 - 右，上 - 下。对象中内容在水平向上从左向右流入，后一行在前一行的下面。所有字形都是竖直向上的。 这种布局通常是罗马语系使用 (IE浏览器语法)
-
tb-rl: 上 - 下，右 - 左。内容在垂直方法上从上向下流入，自右向左。后一竖在前一竖行的左面。全角字符是垂直向上的，半角字符如拉丁字母顺时针旋转 90 度。这种布局是东亚语系通常使用的 (IE浏览器语法)
下面是各个中英文的对照表 (图片截自 MDN)
<br>来实现断行。
最后实现效果如下：
