1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 属性
  5. writing-mode

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

writing-mode

基线
广泛可用
*

自 2017年3月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

* 此特性的某些部分的支持程度可能有所不同。

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 class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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;
}

此属性指定块流动方向，即块级容器堆叠的方向，以及行内内容在块级容器中的流动方向。因此，它也确定块级内容的顺序。

语法

css
/* 关键字值 */
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。

形式定义

初始值horizontal-tb
适用元素all elements except table row groups, table column groups, table rows, and table columns
是否是继承属性是
计算值as specified
动画类型Not animatable

形式语法

writing-mode = 
  horizontal-tb  |
  vertical-rl    |
  vertical-lr    |
  sideways-rl    |
  sideways-lr
此语法反映了基于 CSS Writing Modes Level 4 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息，请参阅浏览器兼容性。

示例

使用多种 writing mode

该示例展现了所有 writing-mode 语法，以及不同语言的展示情况。

HTML

以下 HTML 只是一个简单的 <table>，每个单元格展示了不同的 writing-mode 的文本。

html
<table>
  <tr>
    <th>值</th>
    <th>竖排文本</th>
    <th>横排文本（从左到右）</th>
    <th>横排文本（从右到左）</th>
    <th>混合文本</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</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>מלל ארוך לדוגמא</span></td>
    <td class="example Text5"><span>1994 年に至っては</span></td>
  </tr>
</table>

CSS

调整内容方向的 CSS 代码是这样的：

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 的浏览器提供了应当看到的输出：

A 6 rows by 5 columns table showing the various directional flow of text and number adjusted using the vertical-lr or rl, horizontal-lr or rl, sideways-lr or rl horizontal-tb CSS properties. The flow is applied to different languages

规范

规范
CSS Writing Modes Level 4
# block-flow
Scalable Vector Graphics (SVG) 2
# WritingModeProperty

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题