css中的文字排版处理 writing-mode ，text-orientation， text-combine-upright， letter-spacing运用

这样的古诗排版，需要了解writing-mode

 writing-mode 属性定义了文本在水平或垂直方向上如何排布。

语法格式如下：

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

• horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
• vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
• vertical-lr：垂直方向内内容从上到下，水平方向从左到右
• sideways-rl：内容垂直方向从上到下排列
• sideways-lr：内容垂直方向从下到上排列

CSS中的text-orientation属性用于设置字符在一行中的方向。

此属性在垂直脚本中很有用，例如创建垂直表标题，定义行名等。

用法: text-orientation:mixed|upright|sideways;

    <div class="poem">
        <h1>望庐山瀑布</h1>
        <div class="year">
            <span class="author">李白</span>
            <span>701</span>
            <span>~</span>
            <span>706</span>
        </div>

        <p>日照香炉生紫烟</p>
        <p>遥看瀑布挂前川</p>
        <p>飞流直下三千尺</p>
        <p>疑是银河落九天</p>
    </div>

    <style>
        .poem {
            writing-mode: vertical-rl;
            margin: 50px auto;
            letter-spacing: 5px;
        }

        .year .author {

            margin-bottom: 20px;
            text-combine-upright: none;

        }
        h1{
            text-align: center;
        }
        

        .year {
            text-align: end;
            margin-right: -15px;
            font-size: 12px;
            color: #666;
        }

        .year span {
            text-orientation: upright;

            text-combine-upright: all;
        }

        p {
            font-size: 20px;
            letter-spacing: 10px;
        }
    </style>