竖排多音字标注必须用 writing-mode: vertical-rl 且配合 text-orientation: mixed，禁用 vertical-lr 和 upright；父容器需为 block/inline-flex、设 height，并注意 padding/line-height/white-space/text-align 在竖排下的语义反转。
竖排多音字标注必须用 writing-mode: vertical-rl
多音字标注（如“长”上标“cháng/zhǎng”）本身是混合内容，但竖排时不能靠 transform 或拆字 flex 实现——否则拼音和汉字复制顺序错乱、屏幕阅读器无法识别、标点位置全乱。唯一合规路径是整块容器启用语义化竖排：writing-mode: vertical-rl，让浏览器按真实文字流重排。注意：vertical-lr 会导致括号翻转方向错误（如“（”变“）”），中文场景禁用。
text-orientation: mixed 是拼音可读的关键
不设或设错 text-orientation，多音字旁的拉丁拼音会横躺、倒置或挤成一列不可读。必须显式写 text-orientation: mixed：
- 汉字（如“长”）保持直立
- 拼音（如“cháng”）自动顺时针旋转 90°，变成从上到下排列的 c-h-á-n-g
- 斜杠“/”、括号“（）”等标点按竖排逻辑翻转为“／”“）（”
别用 upright：它会让拼音字母全部直立，结果是“c”“h”“ᔓn”“g”五个字纵向堆叠，完全失去拼音语义。
容器 display 和 height 是竖排生效的硬门槛
90% 的“竖排不显示”问题，不是 CSS 写错了，而是被布局规则拦截：
- 父容器是
display: inline或inline-block→writing-mode被忽略；改成block或inline-flex - 用了
float、position: absolute或display: table→ 触发旧式布局上下文，writing-mode失效 - 容器没设
height或max-height→ 竖排文本无限向下延伸，视觉上“看不见”；必须限定空间，比如height: 200px或用flex容器约束
换行和间距要重新理解“上下左右”
竖排后，CSS 属性的方向含义全变了：
-
line-height控制的是“列间距”，不是“行高”；必须用无单位值（如line-height: 1.6），禁用px值，否则不同字号下间距崩塌 -
padding-top/padding-bottom变成左右留白，padding-left/padding-right变成上下留白 - 换行靠
white-space: normal（默认），允许在空格、顿号、逗号后折列；手动分段用white-space: pre-line；绝对别用white-space: nowrap，否则整段拼音直接横向溢出
最易被忽略的是：竖排后 text-align: left 实际对齐顶部，right 对齐底部——这对多音字与注音的相对位置影响极大，调错就导致拼音飘到汉字上方或下方之外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
