CSS writing-mode属性如何实现文字竖排显示的方法与示例

要实现 CSS 竖排文字效果，最直接、最标准的方法无疑是使用 writing-mode，这是原生支持的方案，无需依赖 JavaScript 或通过 transform 强行模拟。推荐采用 vertical-rl 并结合 text-orientation: mixed，同时务必记得将 direction 设为 rtl，并重新理解 text-align 的作用机制——竖排的真正难点往往不在于属性本身，而在于它如何颠覆我们习惯的布局思维。

vertical-rl 是中文竖排的首选方案

中文古籍、报刊标题、传统牌匾——凡是希望文字以竖向方式呈现的场景，默认就应该使用 vertical-rl：文本从上到下排列，行序从右向左，这样才符合实际阅读习惯。如果设置为 vertical-lr，第一列会跑到最左侧，视觉上接近“镜像竖排”，除非涉及特定文化场景，否则中文项目几乎不会采用。

• vertical-rl：适合大多数中文、日文、韩文的竖排需求，选它基本没错
• vertical-lr：除非进行蒙古文排版或某些特殊 UI 设计，日常项目几乎用不上
• horizontal-tb 属于默认水平排版，不要用它来“模拟”竖排，两者完全不同

text-orientation 控制字符的旋转方向

仅设置 writing-mode: vertical-rl 只是第一步——汉字会保持直立，但英文字母和数字默认会被顺时针旋转 90°，阅读体验非常糟糕。此时必须配合 text-orientation 进行精准调校：

• text-orientation: mixed：汉字/假名保持直立，拉丁字母、数字、标点自动旋转——这是最常用、最自然的组合，没有之一
• text-orientation: upright：所有字符强制直立显示，适用于书法展示、印章式排版。但英文会变成“横着站立”，需要确认设计意图能否接受
• 一定不要省略这个属性，否则英文段落可能出现阅读困难

direction 和 text-align 需同步调整

竖排之后，“左对齐”“右对齐”的概念完全改变。text-align: left 实际对齐的是容器顶部（即“首行顶对齐”），而 direction: rtl 才是真正控制行序方向的关键。许多开发者只调整 text-align 却忽略 direction，导致无论怎么调效果都不对。

• 使用 vertical-rl 时，建议显式添加 direction: rtl，确保后续子元素（如按钮、图标）的布局逻辑保持一致
• text-align: center 在竖排中表示“居中列”，而非居中行；text-align: right 反而会使文字贴到容器底部
• 如果容器中包含 inline 元素（例如 或图标），它们的 baseline 对齐会受到 writing-mode 影响，必要时可用 vertical-align 微调

兼容性与 fallback 方案需提前验证

writing-mode 在 Chrome 48+、Firefox 41+、Safari 12.1+、Edge 79+ 中已获得稳定支持，但 IE 完全不识别该属性。如果项目仍需兼容 IE，仅靠 CSS 属性是不够的。

• 现代项目可以放心使用，但建议测试 iOS Safari 旧版本（如 iOS 12）是否存在渲染异常
• 避免直接在 table 或 flex 子项上应用 writing-mode，某些浏览器会破坏布局流。稳妥的做法是先包裹一层

• 如果需要 fallback，可以使用 @supports (writing-mode: vertical-rl) 进行特性检测，降级为通过 transform + width/height 手动控制的方案

真正棘手的不是写那两行 CSS，而是所有关联样式——padding、margin、line-height、overflow——都需要按照竖排逻辑重新理解。例如 line-height 控制的是“行间距高度”，但在竖排中实际影响的是“字距宽度”。把这些原理理清楚，竖排才算真正掌握。