writing-mode: vertical-rl 是唯一可靠、语义正确、可访问的中文竖排方案，必须搭配 text-orientation: mixed 以确保汉字直立、英数旋转90°、标点自动翻转，同时避免内联元素、float 或 absolute 定位导致失效。
writing-mode: vertical-rl 是唯一能正确实现中文纵向排版的 CSS 值，它不是“让字转90度”，而是重定义文本流方向——文字从上到下、行从右到左推进。其他写法（如 transform: rotate(90deg) 或 writing-mode: vertical-lr）会导致复制错乱、阅读顺序颠倒、标点翻转或屏幕阅读器无法识别。
为什么 writing-mode: vertical-rl 必须配 text-orientation: mixed
不设 text-orientation，Chrome 和 Safari 可能默认走 sideways 行为，导致汉字歪斜、英文横躺；设成 upright 又会让 “2024” 显示成四行小字，数字基线错位、不可读。mixed 是唯一平衡方案：
- 汉字保持直立，符合中文阅读习惯
- ASCII 字母和数字自动顺时针旋转 90°，维持可读性
- 括号、破折号等标点按 Unicode 竖排规则自动翻转（如「(」在上、「)」在下）
注意：text-orientation: mixed 在 Firefox 和 Chrome 中对标点渲染位置略有差异，若内容含大量英文术语（如 API、HTTP），可局部用 span 包裹并设 writing-mode: horizontal-tb 强制回横排。
writing-mode 失效的三个高频原因
常见报错不是语法错误，而是布局模式冲突：
- 父容器是
display: inline或inline-block→ 改为block或inline-flex（内联元素不支持writing-mode） - 用了
float或position: absolute→ 这些触发旧式布局，绕过文本流控制，writing-mode被忽略 - 容器没设宽度（
width）→ 竖排下width控制的是“每列高度”，不设就塌缩，文字挤成一团或直接溢出
别在 display: flex 或 display: grid 的父容器上直接加 writing-mode：它会反转 justify-content 和 grid-template-columns 的语义，子项极易堆叠消失。
竖排下的 line-height 和 padding 怎么调才不反直觉
竖排后，CSS 的方向语义全变了：
-
line-height: 1.4仍表示“行高是字号的 1.4 倍”，但“行”已变成垂直方向，数值不变，视觉节奏却完全不同——建议用无单位值，避免px导致不同字号下挤压或撑开 -
padding: 0 1em实际作用于「上下不留白，左右各留 1em」——因为竖排后，padding-inline对应书写流左右，padding-block对应上下 - 若容器设了
height，竖排内容大概率溢出；优先用min-height或让高度由内容自然撑开
示例：.vert-text { writing-mode: vertical-rl; text-orientation: mixed; line-height: 1.4; padding: 0 1em; } ——这里 padding: 0 1em 是右侧和左侧留白，不是上下。
真正难的不是写出那两行 CSS，而是理解竖排后整个盒模型的方向重映射：width 变成列高，padding 的逻辑方向随 writing-mode 动态切换，而 text-orientation 的微小差异在混合文本中会被放大成可读性问题。这些细节在编辑器预览里看不出，只有真正在移动端 Safari 或 Firefox 中选中、复制、朗读时才会暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
