诗歌诗句垂直排版css

4月 16, 2020

分类:Web基础

CSS
writing-mode

需求:

上一篇小编写了首打油诗 暴风雨 ,很多小伙伴咨询如何排版的,其实很简单运用了一个css属性 writing-mode,这个属性在国际化中经常用到,因为有的海外国家的阅读和书写习惯跟我们不一样,嗯,跟我们古文的排版有点像,也算是巧合了,有了这个属性可以运用.

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="margin:10%;"><pre style="text-align:center;font-size:30px;font-family:STKaiti,KaiTi,PMingLiU,DFKai-SB;writing-mode: vertical-rl;">
    <div style="font-size:50px;">暴风雨</div>
       独书先生

    暴雨直下眼迷茫，
    大风骤起飕脸庞。
    雷声贯耳家中藏，
    草香扑鼻思故乡。
    </pre></div>
</body>
</html>