【CSS】writing-mode实现古诗词排版

writing-mode 实现古诗词排版

1、writing-mode属性参考

MDN 文档writing-mode

2、快速上手

该属性主要有三个可选值：horizontal-tb(默认), vertical-lr, vertical-rl。

3、实现古诗词排版

使用vertical-rl的排版特性，即可简单实现古诗词的排版样式。直接上代码。

• html:

<div class="poet">
  <h1>雨霖铃</h1>
  <p>寒蝉凄切，对长亭晚，骤雨初歇。<br>
    都门帐饮无绪，留恋处，兰舟催发。<br>
    执手相看泪眼，竟无语凝噎。<br>
    念去去，千里烟波，暮霭沉沉楚天阔。</p>

  <p>多情自古伤离别，更那堪，冷落清秋节！<br>
    今宵酒醒何处？杨柳岸，晓风残月。<br>
    此去经年，应是良辰好景虚设。<br>
    便纵有千种风情，更与何人说？<p>
  <p class="author">——&lt;宋&gt;<strong>柳永</strong></p>
</div>

• css:

.poet{
  /*wirting-mode实现竖直排版*/
  writing-mode: vertical-rl;
}
.poet h1{
  margin-top: 4em;
}
.poet p:not(.author){
  letter-spacing: 0.5em;
  line-height:1.5em;
  margin: 2em;
}
.poet .author{
  text-align: right;
}

• 效果：

4、在线预览

writing-mode实现古诗词排版。