此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
writing-mode
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年3月.
* Some parts of this feature may have varying levels of support.
writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置该属性时，应在根元素上设置它（对于 HTML 文档，应该在html 元素上设置）
尝试一下
writing-mode: horizontal-tb;writing-mode: vertical-lr;writing-mode: vertical-rl;writing-mode: sideways-rl;writing-mode: sideways-lr;<section> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div></section>#example-element { border: 1px solid #c5c5c5; padding: 0.75em; width: 80%; max-height: 300px; display: flex;}#example-element > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; margin: 10px; flex: 1;}此属性指定块流动方向，即块级容器堆叠的方向，以及行内内容在块级容器中的流动方向。因此，它也确定块级内容的顺序。
语法
/* 关键字值 */writing-mode: horizontal-tb;writing-mode: vertical-rl;writing-mode: vertical-lr;/* 全局值 */writing-mode: inherit;writing-mode: initial;writing-mode: revert;writing-mode: revert-layer;writing-mode: unset;将writing-mode 属性指定为下面列出的值之一。水平流动方向也受文本的方向影响，从左到右（ltr，例如英语和大多数其他语言）或从右到左（rtl，例如希伯来语或阿拉伯语）。
值
horizontal-tb对于左对齐（
ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。vertical-rl对于左对齐（
ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。vertical-lr对于左对齐（
ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。sideways-rl实验性对于左对齐（
ltr）文本，内容从下到上垂直流动。对于右对齐（rtl）文本，内容从上到下垂直流动。所有字形（即使是垂直文本中的字形）都朝向右侧。sideways-lr实验性对于左对齐（
ltr）文本，内容从上到下垂直流动。对于右对齐（rtl）文本，内容从下到上垂直流动。所有字形（即使是垂直文本中的字形）都朝向左侧。lr已弃用除 SVG1 文档外，已弃用。对于 CSS，请改用
horizontal-tb。lr-tb已弃用除 SVG1 文档外，已弃用。对于 CSS，请改用
horizontal-tb。rl已弃用除 SVG1 文档外，已弃用。对于 CSS，请改用
horizontal-tb。tb已弃用除 SVG1 文档外，已弃用。对于 CSS，请改用
vertical-lr。tb-rl已弃用除 SVG1 文档外，已弃用。对于 CSS，请改用
vertical-rl。
形式定义
形式语法
writing-mode =
horizontal-tb|
vertical-rl|
vertical-lr|
sideways-rl|
sideways-lr
示例
使用多种 writing mode
该示例展现了所有 writing-mode 语法，以及不同语言的展示情况。
HTML
以下 HTML 只是一个简单的<table>，每个单元格展示了不同的writing-mode 的文本。
<table> <tr> <th>值</th> <th>竖排文本</th> <th>横排文本（从左到右）</th> <th>横排文本（从右到左）</th> <th>混合文本</th> </tr> <tr> <td>horizontal-tb</td> <td><span>我家没有电脑。</span></td> <td><span>Example text</span></td> <td><span>מלל ארוך לדוגמא</span></td> <td><span>1994 年に至っては</span></td> </tr> <tr> <td>vertical-lr</td> <td><span>我家没有电脑。</span></td> <td><span>Example text</span></td> <td><span>מלל ארוך לדוגמא</span></td> <td><span>1994 年に至っては</span></td> </tr> <tr> <td>vertical-rl</td> <td><span>我家没有电脑。</span></td> <td><span>Example text</span></td> <td><span>מלל ארוך לדוגמא</span></td> <td><span>1994 年に至っては</span></td> </tr> <tr> <td>sideways-lr</td> <td><span>我家没有电脑。</span></td> <td><span>Example text</span></td> <td><span>מלל ארוך לדוגמא</span></td> <td><span>1994 年に至っては</span></td> </tr> <tr> <td>sideways-rl</td> <td><span>我家没有电脑。</span></td> <td><span>Example text</span></td> <td><span>מלל ארוך לדוגמא</span></td> <td><span>1994 年に至っては</span></td> </tr></table>CSS
table { border-collapse: collapse;}td,th { border: 1px black solid; padding: 3px;}th { background-color: lightgray;}.example { height: 75px; width: 75px;}调整内容方向的 CSS 代码是这样的：
.example.Text1 span,.example.Text1 { writing-mode: horizontal-tb;}.example.Text2 span,.example.Text2 { writing-mode: vertical-lr;}.example.Text3 span,.example.Text3 { writing-mode: vertical-rl;}.example.Text4 span,.example.Text4 { writing-mode: sideways-lr;}.example.Text5 span,.example.Text5 { writing-mode: sideways-rl;}结果
以下图片为不完整支持writing-mode 的浏览器提供了应当看到的输出：
规范
| Specification |
|---|
| CSS Writing Modes Level 4 # block-flow |
| Scalable Vector Graphics (SVG) 2 # WritingModeProperty |