CSS writing-mode
🌙
手机阅读
本文目录结构
阿西河教程(axihe.com)
CSS writing-mode
表格中展示了不同的书写模式：
| value | Vertical script | Horizontal script | Mixed script |
|---|---|---|---|
| horizontal-tb | 我家没有电脑。 | Example text | 1994年に至っては |
| vertical-lr | 我家没有电脑。 | Example text | 1994年に至っては |
| vertical-rl | 我家没有电脑。 | Example text | 1994年に至っては |
| sideways-lr | 我家没有电脑。 | Example text | 1994年に至っては |
| sideways-rl | 我家没有电脑。 | Example text | 1994年に至っては |
代码如下：
<!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：内容垂直方向从下到上排列
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | IE | Chrome | FF | safari | Open |
|---|---|---|---|---|---|
| writing-mode | 8.0 | 6.0 | 41.0 | 5.1 | 15 |
