writing-mode 书写模式属性

最后更新：2026-09-13

writing-mode writing-mode 书写模式属性

writing-mode 属性用于设置文本的整体排版方向，支持水平排版（horizontal-tb）和垂直排版（vertical-rl、vertical-lr）两种模式。它常用于实现中文古籍、日文传统排版等竖排文字效果，也会改变块级元素和行内元素的排列方向，是东亚语言排版的重要工具。

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

值	类型	描述
`horizontal-tb \| vertical-rl \| vertical-lr`	关键字	书写方向

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
writing-mode	✓ v43	✓ v12	✓ v16	✓ v9	✓ v30
所有主流浏览器均支持

提示： vertical-rl 是中文古籍的传统排版方式（从上到下、从右到左）；vertical-lr 是部分蒙古文和日文排版方式。

重要： writing-mode 会改变 CSS 逻辑属性的方向映射，例如 width 在垂直排版中对应 block-size，height 对应 inline-size。

Qwriting-mode 和 direction 有什么区别？

Adirection 只改变文本的流向（左右），元素仍是水平排列；writing-mode 会改变整个排版方向，让块级元素垂直排列，行内元素也垂直显示。

Q垂直排版时文字会旋转吗？

A在 vertical-rl 和 vertical-lr 中文字都保持正向，只是整体从上到下排列。如果需要文字旋转 90 度，需额外使用 text-orientation: sideways。

Q如何实现中文竖排文字？

A设置 writing-mode: vertical-rl 即可让文字从上到下、从右到左排列，模拟中文古籍的传统排版；vertical-lr 则是从左到右的竖排。默认文字保持正向不旋转。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。