2024年3月22日发(作者：莘嫣)
前端竖排文字的排列方式
作者：请叫我二狗哥
在台湾、香港等地区，文章排布仍然遵循中国古代的竖版书写排列方式，也有部分网
站诗词在排列时希望采用仿古竖版排列的模式。前端默认的文字排列为从左至右横版排列，
如何才能实现竖版文字排列呢？在CSS3中有writing-mode属性可以很好地解决这个问
题。
writing-mode属性有三个值：
writing-mode: horizontal-tb;/*默认：水平方向，从上到下*/
writing-mode: vertical-rl; /*垂直方向，从右向左*/
writing-mode: vertical-lr; /*垂直方向，从左向右*/
因此对于竖向排列可以采用后两个属性值。
案例应用1：
请将汉乐府《长歌行》采用竖版形式从右往左进行排列，并满足一下要求：
（1）标题字体采用20px，作者字体采用12px，诗词内容采用16px；
（2）设置行间距为字体大小的1.8倍；
（3）容器(.content)为宽500px，高300px，且水平居中显示。
参考代码：
* {
2024年3月22日发(作者：莘嫣)
前端竖排文字的排列方式
作者：请叫我二狗哥
在台湾、香港等地区，文章排布仍然遵循中国古代的竖版书写排列方式，也有部分网
站诗词在排列时希望采用仿古竖版排列的模式。前端默认的文字排列为从左至右横版排列，
如何才能实现竖版文字排列呢？在CSS3中有writing-mode属性可以很好地解决这个问
题。
writing-mode属性有三个值：
writing-mode: horizontal-tb;/*默认：水平方向，从上到下*/
writing-mode: vertical-rl; /*垂直方向，从右向左*/
writing-mode: vertical-lr; /*垂直方向，从左向右*/
因此对于竖向排列可以采用后两个属性值。
案例应用1：
请将汉乐府《长歌行》采用竖版形式从右往左进行排列，并满足一下要求：
（1）标题字体采用20px，作者字体采用12px，诗词内容采用16px；
（2）设置行间距为字体大小的1.8倍；
（3）容器(.content)为宽500px，高300px，且水平居中显示。
参考代码：
* {