CSS书写模式用于控制文本在页面中的排列方向、行内内容的流向以及块级元素的排布方式，是处理特殊排版需求的核心属性。通过合理设置书写模式，可以轻松实现竖向文本、多语言混合排版等效果，适配不同的页面设计需求。
CSS书写模式基础属性
控制书写模式的核心属性是writing-mode，它定义了文本行是水平排列还是垂直排列，以及块级容器的方向。该属性可以应用在块级元素、内联元素以及文本相关的容器上，生效范围覆盖元素内的所有文本内容。
writing-mode常用取值
不同取值对应不同的排版效果，以下是主流浏览器支持的常用取值：
| 取值 | 说明 |
|---|---|
| horizontal-tb | 默认值，文本水平排列，行从上到下堆叠，符合大多数语言的默认排版习惯 |
| vertical-rl | 文本垂直排列，行从右到左堆叠，类似传统中文古籍的排版方式 |
| vertical-lr | 文本垂直排列，行从左到右堆叠，部分东亚语言的竖排变体使用这种方式 |
| sideways-rl | 文本垂直排列，字符顺时针旋转90度，行从右到左堆叠 |
| sideways-lr | 文本垂直排列，字符逆时针旋转90度，行从左到右堆叠 |
CSS书写模式设置示例
下面通过具体的代码示例展示不同取值的效果：
基础水平排版
/* 默认水平排版，不需要额外设置也可以生效 */
.text-horizontal {
writing-mode: horizontal-tb;
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
传统竖排中文效果
/* 实现从右到左的竖排文本 */
.text-vertical {
writing-mode: vertical-rl;
height: 400px;
width: 50px;
border: 1px solid #ccc;
padding: 10px;
font-size: 18px;
}
HTML配合使用示例
<div class="text-horizontal">
这是水平排列的文本内容，符合常规网页的排版习惯，适合大多数场景使用。
</div>
<div class="text-vertical">
这是垂直排列的中文文本，模拟传统古籍的排版方式，阅读方向从上到下，从右到左。
</div>
书写模式的注意事项
- 设置垂直书写模式后，块级元素的宽度和高度定义会互换，原本的宽度会变成文本行的高度，高度会变成文本区域的宽度，需要调整容器尺寸适配内容。
- 部分旧版本浏览器对
writing-mode的支持存在差异，使用前可以通过Can I Use查询兼容性，必要时添加浏览器前缀。 - 书写模式会影响元素内所有文本的排列，如果需要局部调整某段文本的方向，可以单独给对应元素设置书写模式属性，不会影响到父容器的其他内容。
- 当页面需要支持多语言时，可以根据不同语言的排版习惯动态切换书写模式，提升不同语言用户的使用体验。
实际应用场景
CSS书写模式常用于以下场景：
- 传统中文、日文、韩文的竖排排版需求，比如古籍展示页面、传统文化相关的网站设计。
- 侧边栏的竖向导航文本，节省横向空间，同时提升设计的独特性。
- 特殊海报、宣传页的创意排版，通过垂直文本打造差异化的视觉效果。
- 多语言网站中，针对不同语言的排版规则自动适配文本排列方向。
通过合理运用CSS书写模式属性，可以灵活处理各种特殊的文本排版需求，减少使用图片替代文本的情况，既提升了页面的可访问性，也方便后续的样式调整和内容维护。
CSSwriting_mode书写模式文本布局修改时间：2026-06-10 11:15:45