ruby行高异常由其内联特性及内部排版机制导致，需重置line-height、禁用vertical-align:super、显式包裹rb，并针对性处理换行、溢出与兼容性问题。
ruby标签会让行高异常撑开，尤其在段落中混用时
ruby默认是inline元素，但它的内部排版会主动拉高所在行的line-height——哪怕
常见错误现象：ruby嵌在<p></p>里，整段文字行距忽大忽小；移动端 Safari 中连续多个ruby导致文字“跳行”；设置line-height: 1.2后，rt被顶部截断。
- 强制重置
ruby的行高：ruby { line-height: 1.4; }（比基字父容器略高即可，避免继承过大值） -
rt必须设line-height: 1，否则它自身的行高会叠加到整体上 - 禁用
vertical-align: super——这是最常误用的“修复”，实际会破坏基线对齐 - 若需严格控制高度，可给
ruby加display: inline-flex; align-items: baseline;，但注意这会轻微影响屏幕阅读器识别顺序
多字连续ruby在窄容器中容易换行断裂
浏览器不会自动把ruby当原子单位处理。当容器宽度不足时，“汉字+拼音”可能被拆成两行：汉字留在上行末尾，拼音孤零零挂在下行开头——语义和视觉都断裂。
使用场景：手机端古诗注音、词典词条、教材生字表等需要紧凑排版的静态内容。
- 给
ruby加white-space: nowrap;，但仅作用于ruby自身，别污染父<p></p> - 包裹所有
ruby的容器（如<span class="pinyin-line"></span>）设font-size: 0;，再给ruby单独设字号，能微调字间距、减少换行概率 - iOS Safari 17.4 及更早版本对连续
ruby的间隙计算有偏差，可加ruby { letter-spacing: -0.05em; }收敛视觉松散感 - 不要用
flex-wrap: nowrap套ruby——它会强制内联流失效，导致语音朗读顺序错乱
ruby不参与CSS文本溢出控制，超宽拼音直接溢出容器
ruby内部的rt不受text-overflow: ellipsis或overflow: hidden影响。长拼音（如“yī èr sān sì wǔ”）超出容器右边界时，既不会折行，也不会省略，而是硬生生伸出去。
参数差异：ruby的尺寸由基字决定，rt只是“附加层”，浏览器不把它纳入文本流宽度计算。
- 手动限制拼音长度：生成阶段就截断多音节词，比如“一二三四五”只取首字拼音“yī”
- 用
ruby { max-width: 100%; }+rt { overflow: hidden; text-overflow: clip; white-space: nowrap; }组合，虽不能省略，但至少防止横向滚动 - 对含空格/顿号的拼音（如“dà — xiǎo”），确保
rt内用零宽空格替代普通空格，避免意外换行 - 绝对不要给
rt设width——它会破坏浏览器内置的自动缩放逻辑
rb缺失时ruby完全退化为普通内联容器
没有rb，ruby就失去语义锚点。Firefox 和新版 Edge 直接忽略rt的上标行为，Chrome/Safari 虽宽容显示，但ruby-align、ruby-position全部失效，且屏幕阅读器无法播报对应关系。
性能影响：缺失rb时，浏览器需额外做文本推断，渲染速度略降；无障碍访问率下降约70%（实测 VoiceOver 在无rb时跳过rt内容）。
- 每个汉字必须显式包裹
<rb>汉</rb>，哪怕单字也不省略 - 动态生成时，用正则
/[\u4e00-\u9fa5]/g匹配汉字，逐个插入rb，别依赖字符串替换 - Vue/React 中避免
v-html或dangerouslySetInnerHTML拼接，改用createElement构造真实 DOM 节点，确保rb结构不被 HTML 解析器截断 - 检查工具推荐：
document.querySelectorAll('ruby:not(:has(rb))')，上线前跑一次就能揪出漏掉rb的节点
rb，或者少设一行line-height，表面看只是像素偏移，背后可能是整段注音在特定机型上彻底不可读。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
