CSS中如何通过writing-mode属性实现文字竖排显示

writing-mode 是实现 CSS 竖排文字最直接、最标准的方式，推荐使用 vertical-rl 配合 text-orientation: mixed，并同步设置 direction: rtl 和调整 text-align 含义，注意兼容性及关联样式重构。

writing-mode 是实现 CSS 竖排文字最直接、最标准的方式，不用 JS、不依赖 transform 旋转，原生支持语义化排版。

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 元素（如 <span> 或图标），它们的 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，某些浏览器会破坏布局流，优先包裹一层 <div>
• 若需 fallback，可用 @supports (writing-mode: vertical-rl) 做特性检测，降级为 transform + width/height 手动控制的方案

真正麻烦的不是写那两行 CSS，而是后续所有关联样式（padding/margin/line-height/overflow）都得按竖排逻辑重新理解一遍——比如 line-height 控制的是“行间距高度”，但在竖排里它实际影响的是“字距宽度”。