CSS 之书写模式(Writing Modes)

一、属性

Properties
属性
Description
简介
direction 检索或设置文本流的方向
unicode-bidi 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
writing-mode 设置或检索对象的内容块固有的书写方向

二、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书写模式</title>
    <style>
        .test {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid #aaa;
        }

        .lr-tb {
            writing-mode: lr-tb;
        }

        .tb-rl {
            writing-mode: tb-rl;
        }
    </style>
</head>
<body>
<div class="test lr-tb">本段文字将按照水平从左到右的书写方向进行流动。</div>
<div class="test tb-rl">本段文字将按照垂直从右到左的书写方向进行流动。</div>
<ul class="tb-rl">
    <li class="test">本段文字将按照垂直从右到左的书写方向进行流动。</li>
    <li class="test">本段文字将按照垂直从右到左的书写方向进行流动。</li>
</ul>
</body>
</html>

posted @ 2019-12-13 17:00  样子2018  阅读(413)  评论(0编辑  收藏  举报