css 文字方向设置

原创 2023-05-12 13:55:55 532

css文字方向控制主要是用到writing-mode控制文字书写方向，text-orienttatino设置文本单个文字的朝向，text-combine-upright设置文字正常朝下，要不要连接组合起来。

css 代码如下：

    <style>
        .poem{
            color: #333;
            font-size: 1.4em;
             writing-mode: vertical-rl;/*文字书写方向 */
             float: right;
        }
        .author{
            color: #aaa;
            font-size: 0.8em;
            margin-right: -30px;
            text-align: end;
        }
        .author .year{
            text-orientation:upright;
            /* 设置文本单个文字的朝向 */
            text-combine-upright: all;
            /* 文字在正常朝向下，要不要连着组合起来，就是横着组合起来 */
        }
    </style>

html 代码如下：

    <div class="poem">
        <h1>临江仙</h1>
        <div class="author">
            <span>杨慎</span>
            <span class="year">1488</span>
            <span class="to">~</span>
            <span class="year">1559</span>
        </div>
        <p>滚滚长江东逝水，</p>
        <p>浪花淘尽英雄。</p>
        <p>是非成败转头空。</p>
        <p>青山依旧在，</p>
        <p>几度夕阳红。</p>
        <p>白发渔樵江渚上，</p>
        <p>惯看秋月春风。</p>
        <p>一壶浊酒喜相逢。</p>
        <p>古今多少事，</p>
        <p>都付笑谈中。</p>
    </div>

css 文字方向设置

推荐

推荐资讯

热门资讯