writing-mode

Baseline 广泛可用 *

此特性已得到良好确立，可跨多种设备和浏览器版本使用。自 2017 年 3 月起，所有浏览器均支持此特性。

* 此特性的某些部分可能存在不同级别的支持。

writing-mode CSS 属性设置文本行是水平还是垂直排列，以及块的排列方向。当为整个文档设置时，应在根元素（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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

此属性指定块流方向，即块级容器的堆叠方向，以及块容器内联级内容的流动方向。因此，它也决定了块级内容的排序。

语法

css

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;

/* Global values */
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-lr 已弃用: 除了 SVG1 文档，此特性已被弃用。对于 CSS，请改用 vertical-lr。
tb-rl: 除了 SVG1 文档，此特性已被弃用。对于 CSS，请改用 vertical-rl。

正式定义

初始值	`horizontal-tb`
应用于	所有元素，除了表格行组、表格列组、表格行和表格列
继承性	是
计算值	同指定值
动画类型	不可动画化

正式语法

writing-mode = 
  horizontal-tb  |
  vertical-rl    |
  vertical-lr    |
  sideways-rl    |
  sideways-lr

示例

使用多种书写模式

此示例演示了所有书写模式，并显示了每种模式下使用不同语言的文本。

HTML

HTML 是一个 <table>，其中每个书写模式都在一行中，并有一个列显示使用该书写模式的各种脚本的文本。

html

<table>
  <caption>
    Using multiple writing modes
  </caption>
  <tr>
    <th>Value</th>
    <th>Vertical script</th>
    <th>Horizontal (LTR) script</th>
    <th>Horizontal (RTL) script</th>
    <th>Mixed script</th>
  </tr>
  <tr class="text1">
    <th>horizontal-tb</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="text2">
    <th>vertical-lr</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="text3">
    <th>vertical-rl</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="experimental text4">
    <th>sideways-lr</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="experimental text5">
    <th>sideways-rl</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
</table>
<p class="notice">
  Your browser does not support the <code>sideways-lr</code> or
  <code>sideways-rl</code> values.
</p>

CSS

table {
  border-collapse: collapse;
}
td,
th {
  border: 2px black solid;
  padding: 4px;
}
th {
  background-color: lightgray;
}

.experimental {
  display: none;
}

.notice {
  display: table-row;
  font-weight: bold;
  text-align: center;
}

@supports (writing-mode: sideways-lr) {
  .experimental {
    display: table-row;
  }
  .notice {
    display: none;
  }
}

调整内容方向性的 CSS 如下所示

css

.text1 td {
  writing-mode: horizontal-tb;
}

.text2 td {
  writing-mode: vertical-lr;
}

.text3 td {
  writing-mode: vertical-rl;
}

.text4 td {
  writing-mode: sideways-lr;
}

.text5 td {
  writing-mode: sideways-rl;
}

结果

将 writing-mode 与 transforms 结合使用

如果您的浏览器不支持 sideways-lr，一种解决方法是使用 transform 来实现类似的效果，具体取决于脚本方向。vertical-rl 的效果与 sideways-lr 相同，因此对于从左到右的脚本不需要进行转换。在某些情况下，将文本旋转 180 度足以实现 sideways-lr 的效果，但字体字形可能并非设计为旋转，因此这可能会产生意外的定位或渲染。

HTML

html

<table>
  <caption>
    Using writing-mode with transforms
  </caption>
  <thead>
    <tr>
      <th>Vertical LR</th>
      <th>Vertical LR with transform</th>
      <th>Sideways LR</th>
      <th>Only rotate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="vertical-lr">我家没有电脑。</span>
        <span class="vertical-lr">Example text</span>
      </td>
      <td>
        <span class="vertical-lr rotated">我家没有电脑。</span>
        <span class="vertical-lr rotated">Example text</span>
      </td>
      <td>
        <span class="sideways-lr">我家没有电脑。</span>
        <span class="sideways-lr">Example text</span>
      </td>
      <td>
        <span class="only-rotate">我家没有电脑。</span>
        <span class="only-rotate">Example text</span>
      </td>
    </tr>
  </tbody>
</table>

CSS

css

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

.rotated {
  transform: rotate(180deg);
}

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

.only-rotate {
  inline-size: fit-content;
  transform: rotate(-90deg);
}

table {
  border-collapse: collapse;
}
td,
th {
  border: 2px black solid;
  padding: 4px;
}
th {
  background-color: lightgray;
}
span {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}

结果

规范

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

浏览器兼容性

另见

direction
unicode-bidi
text-orientation
text-combine-upright
CSS 逻辑属性
CSS 书写模式模块
SVG writing-mode 属性
创建垂直表单控件
处理不同的文本方向
在 W3.org 上对竖排文本（中文、日文、韩文和蒙古文）进行样式设置（2022 年）

帮助改进 MDN

了解如何贡献

此页面最后由MDN 贡献者于2025 年 7 月 14 日修改。

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