根本原因是浏览器默认给rt元素设置较大line-height（如1.5），且rt基线参与整行排版，导致行框被撑开；中文段落中挤压感更明显，需同时约束line-height、vertical-align和white-space才能精确控制。
ruby标签为什么会让行高变大
根本原因不是ruby本身有“高度”，而是浏览器默认给rt元素设置了较大的line-height，且rt的基线（baseline）位置参与整行排版计算。哪怕你只写一个字加注音，这行的行框（line box）也会被撑开——尤其在中文段落中，这种挤压感比英文更明显。
- Chrome 和 Firefox 默认给
rt设了约line-height: 1.5或更高，远超汉字正常行高（通常 1.2～1.4） - Safari 更激进：它不缩放
rt字体大小，但保留原始行高，导致rt文字实际占据垂直空间更大 - 如果父容器用了
line-height: normal，不同字体的度量差异会放大问题，比如 Noto Sans CJK 和 Hiragino Sans 渲染同一ruby时行高偏差可达 2px
用 CSS 精确控制 ruby 行高不溢出
不能只调font-size，必须同时约束line-height和vertical-align。否则rt要么贴到汉字顶部，要么把下一行文字顶开。
-
ruby元素本身设line-height: 1.2（推荐值），这是整行的基准，避免父容器继承过大的行高 -
rt设line-height: 1+vertical-align: top，让它不贡献额外行高，仅靠自身字体上升部（ascent）定位 - 务必加
white-space: nowrap到rt，否则拼音含空格（如 “shàng hǎi”）可能在窄容器内折行，直接破坏单行结构 - 不要对
rt使用position: relative微调——移动端缩放后基线偏移不可控，且 iOS Safari 对top值渲染不一致
多字连续 ruby 的换行断裂风险
当一段文字里嵌了多个ruby（如“北京欢迎你”每个字都带拼音），浏览器默认允许在任意ruby之间断行，但用户期望的是“整词不断开”。这不是 bug，是 inline-level 元素的天然行为。
- 给每个
ruby加display: inline-block可阻止内部断行，但会引入额外空白（inline-block 的换行符/空格被渲染为 4px 左右间隙） - 更稳妥的是用
white-space: nowrap包裹整个文本容器（如<p class="with-pinyin"><ruby>北<rt>běi</rt></ruby><ruby>京<rt>jīng</rt></ruby></p>），再配.with-pinyin { white-space: nowrap; } - 若需响应式换行（比如小屏上允许“北京”两字分开），可用
<wbr></wbr>插入软换行点，放在两个ruby之间：<ruby>北<rt>běi</rt></ruby><wbr><ruby>京<rt>jīng</rt></ruby></wbr>
服务端生成 ruby 时的行高隐患
用 Ruby/Python/Node.js 动态拼接 HTML 时，容易忽略模板引擎对空白字符的处理——多出的换行或缩进会被解析为文本节点，插入到 ruby 内部，从而触发浏览器重排，让行高不可预测。
- 确保生成的 HTML 是紧凑单行：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>，而不是换行缩进格式 - 若用 Ruby 的
%Q{}拼接，避免在#{pin_yin}前后加空格或换行；Python 的 f-string 同理，别写成f"<ruby>{char}<rt> {pinyin} </rt></ruby>" - Node.js 中若用
template literals，注意反引号内换行会被保留，建议用.replace(/\s+/g, ' ').trim()清理
ruby 的样式，而是它嵌在段落、列表、表格单元格等不同上下文时，line-height 的继承链和基线对齐逻辑会层层叠加，稍有不慎就出现“同一段文字，左边注音正常、右边注音把下一行顶下去”的现象。这时候得一层层检查父级的 line-height 值、字体族、以及是否意外触发了 BFC。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
