文字方向

writing-mode | direction | unicode-bidi

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 250px;
        }
        p.rtl { direction: rtl; }
        p.rtlTxt {
            width: 335px;
            direction: rtl;
            unicode-bidi: bidi-override;
        }
        div {
            display: inline-block;
            width: 60px;
            height: 150px;
            border: 1px solid #8f9d4c;
        }
        .vertical-lr { writing-mode: vertical-lr; }
        .vertical-rl { writing-mode: vertical-rl; }
    </style>
</head>
<body>
    <h4>Try your best. Just do what you want to do.</h4>
    <p>Try your best. Just do what you want to do.</p>
    <p class="rtl">Try your best. Just do what you want to do.</p>
    <p class="rtlTxt">Try your best. Just do what you want to do.</p>
    <div class="vertical-lr">CSS世界有很多有趣而又好玩的内容</div>
    <div class="vertical-rl">CSS世界有很多有趣而又好玩的内容</div>
</body>
</html>
View Code

 

posted @ 2021-09-10 10:07  し7709  阅读(125)  评论(0)  编辑  收藏  举报