CSS垂直文字排版技巧解析

本文深入解析了CSS实现中文竖排的正确方法与常见陷阱，强调`writing-mode: vertical-rl`是唯一符合传统阅读习惯、语义清晰且可访问性达标的方案，彻底否定`vertical-lr`和`transform: rotate(90deg)`等错误做法；同时系统梳理了`text-orientation`的合理配置策略、Flex/Grid布局中`writing-mode`的误用风险，以及容器尺寸逻辑反转、全角标点依赖、浏览器兼容性等实战细节，为开发者提供了一套兼顾规范性、可用性与印刷质感的中文竖排完整指南。

中文竖排必须用 writing-mode: vertical-rl，不是 vertical-lr，也不是直接加 transform: rotate(90deg) —— 后两者会导致阅读顺序错乱、布局塌陷或可访问性失效。

为什么 writing-mode: vertical-rl 是中文竖排唯一合理选择

vertical-rl 表示“从上到下、从右到左”，这对应中文传统竖排的视觉流：第一列在最右边，文字自上而下书写，新列向左推进。设成 vertical-lr 会让第一列出现在最左边，整段文字“镜像翻转”，用户得从左往右逐列读，完全违背习惯。

• 浏览器按逻辑流渲染，vertical-rl 才让 block-start 对应顶部、inline-end 对应右侧，符合中文排版语义
• vertical-lr 仅用于蒙古文等极少数语言，中文项目中使用属于方向误配
• 别被“lr”字面误导——它不表示“left-to-right 阅读”，而是指“新列生成方向”

text-orientation 必须显式设置，否则中英文混排会错位

默认 text-orientation: mixed 会让汉字直立、英文字母和数字顺时针旋转 90°，造成基线不齐、高度参差。这不是 bug，是规范行为，但实际效果难看。

• 要接近印刷效果：用 text-orientation: mixed + 局部包裹 并设 writing-mode: horizontal-tb
• 要保证英文可读性（如按钮、标签）：统一用 text-orientation: upright，所有字符强制直立
• 绝对不要用 text-orientation: sideways，它会让汉字也躺倒，彻底失去竖排意义

别在 display: flex 或 display: grid 的父容器上直接设 writing-mode

一旦给 flex 容器加 writing-mode: vertical-rl，flex-direction: row 就不再表示“水平排列”，而是变成“垂直主轴”，justify-content 和 align-items 的含义全反了，子元素极易堆叠溢出或消失。

• 正确做法：只对纯文本块（如

  、

  ）应用 writing-mode，让它内部文字流转向
• 若需竖排导航菜单，用 flex-direction: column + text-orientation: upright 更可控
• grid 布局中，writing-mode 不影响 grid-template-columns 定义，但会反转 justify-items 的左右语义，容易误判

容器尺寸、标点与兼容性三个易漏细节

设了 writing-mode 后，CSS 中的“宽高概念对调”：原来设的 width 实际控制的是列高（行长），height 控制的是行数（列宽）。不调整就会文字截断或留大片空白。

• 中文标点必须用全角（如《》、。、，、！），半角标点（如 "、"、",") 在 mixed 模式下会旋转 90°，视觉断裂
• IE 需加 -ms-writing-mode: vertical-rl，旧版 Safari 对 vertical-rl 支持不稳定，建议降级为 transform: rotate(90deg) + white-space: nowrap 保底
• line-height 在竖排中实际控制的是“字距”，不是行距，值建议设为 1.5~2 避免拥挤

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。