要实现 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 控制的是“行间距高度”，但在竖排中实际影响的是“字距宽度”。把这些原理理清楚，竖排才算真正掌握。
