当前位置：首页 > 文章列表 > 文章 > 前端 > CSS方向属性与排版应用详解

CSS方向属性与排版应用详解

2026-01-29 11:18:42 0浏览收藏

什么时候该用 `writing-mode` 而不是 `_direction`

_direction 是 IE5.5–8 的私有 hack 属性，早已被废弃，现代浏览器完全不支持。它曾试图控制行内元素的文本方向（比如让文字从右往左“堆叠”），但行为不可靠、无标准依据，且与 direction 和 unicode-bidi 冲突。现在只要遇到垂直排版或 RTL 布局需求，必须用标准的 writing-mode。

真正需要 writing-mode 的典型场景包括：

东亚出版物中的竖排正文（如古籍、日文漫画对话框）
表格表头旋转 90° 以节省水平空间
配合 text-orientation: mixed 实现中日韩文字在竖排中保持正立
构建 RTL 布局的基础流向（如阿拉伯语网站需 writing-mode: horizontal-tb; direction: rtl，注意这里 writing-mode 本身不负责 RTL，direction 才管这个）

`writing-mode` 的三个核心值怎么选

writing-mode 控制的是**块级内容的布局流方向**，即块如何换行、内联轴如何定义。它的三个常用值对应不同物理流向：

writing-mode: horizontal-tb：默认值，内容从上到下排列块，每块内文字从左到右（LTR）或右到左（RTL）——这是绝大多数网页的流向
writing-mode: vertical-rl：内容从右到左排列块（即新块出现在左边），每块内文字从上到下；适用于中文、日文竖排
writing-mode: vertical-lr：内容从左到右排列块（新块出现在右边），每块内文字从上到下；多用于蒙古文等少数语言

注意：vertical-rl 下，text-align: center 是沿“行内轴”居中，也就是垂直方向居中；而 margin: auto 在块级元素上可能失效，需改用 align-self 或 flex 布局。

为什么 `writing-mode` 会改变 `width`/`height` 的含义

当设置 writing-mode: vertical-rl 后，CSS 的逻辑属性映射发生翻转：width 对应原本的“高度”，height 对应原本的“宽度”。这是因为块流方向变了，内联轴和块轴互换了。

这意味着：

给一个竖排段落设 width: 200px，实际限制的是它的“高度”（即文字能向下延伸多少）
height: 100px 反而控制它在水平方向占多宽（即整段文字从右往左铺开的跨度）
max-width 在竖排中常被误用，应优先考虑 max-block-size 或 max-inline-size 等逻辑属性，避免方向依赖

div.vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /* 这里 width 控制的是段落总高度 */
  width: 300px;
  /* height 控制的是段落在水平方向的宽度 */
  height: 80px;
}

兼容性与常见失效原因

writing-mode 在 Chrome 48+、Firefox 41+、Safari 12.1+、Edge 79+ 中原生支持，IE 完全不支持（IE11 仅支持旧语法 -webkit-writing-mode 等前缀，且行为异常）。移动端 iOS Safari 12.1+ 才稳定支持 vertical-rl。

容易被忽略的失效点：