CSS writing-mode

🌙
手机阅读
本文目录结构

CSS writing-mode

表格中展示了不同的书写模式:

<!DOCTYPE html>

阿西河教程(axihe.com)
valueVertical scriptHorizontal scriptMixed script
horizontal-tb我家没有电脑。Example text1994年に至っては
vertical-lr我家没有电脑。Example text1994年に至っては
vertical-rl我家没有电脑。Example text1994年に至っては
sideways-lr我家没有电脑。Example text1994年に至っては
sideways-rl我家没有电脑。Example text1994年に至っては

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西河教程(axihe.com)</title>
<style>
    table, td, th {
        border: 1px solid black;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }
    .example.Text1 span, .example.Text1 {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
    }

    .example.Text2 span, .example.Text2 {
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    }

    .example.Text3 span, .example.Text3 {
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    }

    .example.Text4 span, .example.Text4 {
    writing-mode: sideways-lr;
    -webkit-writing-mode: sideways-lr;
    -ms-writing-mode: sideways-lr;
    }

    .example.Text5 span, .example.Text5 {
    writing-mode: sideways-rl;
    -webkit-writing-mode: sideways-rl;
    -ms-writing-mode: sideways-rl;
    }
</style>
</head>
<body>
<table>
    <tr>
        <th>value</th>
        <th>Vertical script</th>
        <th>Horizontal script</th>
        <th>Mixed script</th>
    </tr>
    <tr>
        <td>horizontal-tb</td>
        <td class="example Text1"><span>我家没有电脑。</span></td>
        <td class="example Text1"><span>Example text</span></td>
        <td class="example Text1"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>vertical-lr</td>
        <td class="example Text2"><span>我家没有电脑。</span></td>
        <td class="example Text2"><span>Example text</span></td>
        <td class="example Text2"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>vertical-rl</td>
        <td class="example Text3"><span>我家没有电脑。</span></td>
        <td class="example Text3"><span>Example text</span></td>
        <td class="example Text3"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>sideways-lr</td>
        <td class="example Text4"><span>我家没有电脑。</span></td>
        <td class="example Text4"><span>Example text</span></td>
        <td class="example Text4"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>sideways-rl</td>
        <td class="example Text5"><span>我家没有电脑。</span></td>
        <td class="example Text5"><span>Example text</span></td>
        <td class="example Text5"><span>1994年に至っては</span></td>
    </tr>
</table>
</body>
</html>

属性定义及使用说明

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:内容垂直方向从下到上排列

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性IEChromeFFsafariOpen
writing-mode8.06.041.05.115

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

书籍推荐