ruby标签本身不控制换行，换行行为完全由父容器排版策略决定；多字注音须逐字独立包裹ruby，rt必须为直接子元素且不可为空；rp标签位置和内容需严格合规，否则降级失效；移动端需主动约束宽度并设置溢出处理。
ruby标签本身不控制换行，问题出在父容器排版策略
浏览器对ruby的换行行为完全继承自其父元素，ruby自己没有换行逻辑。所谓“不换行”，其实是父容器用了white-space: nowrap、display: inline-block没设宽，或flex布局中未设置flex-wrap: wrap，导致整行被强行撑开。检查 computed styles 时重点看父级的white-space和width/max-width是否缺失。
多字注音必须逐字独立包裹，否则 Safari 渲染错位
把多个汉字塞进一个ruby再配一个rt（如<ruby>汉字<rt>hàn zì</rt></ruby>）是常见错误。Safari 对空格和换行更敏感，会把hàn zì当作单个拼音渲染，导致偏移或重叠。正确做法是每个字单独套一层：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>
-
rt必须直接子元素，不能嵌在span或div里 - 服务端生成时若拼音为空，应跳过整个
<rt>...</rt>，而非留空<rt></rt> - 避免用
text-align: justify或letter-spacing干扰基文字间距
rp标签位置和内容错误会直接禁用 fallback
rp不是装饰性括号，它有严格校验：只能出现在rt内部、且内容必须是纯括号字符（(、)、[、]），多一个空格或字母就失效。Chrome 会显示括号，Safari 则隐藏——但一旦格式非法，所有浏览器都会放弃降级逻辑，导致无括号也无拼音。
- ✅ 正确：
<rt><rp>(</rp>hàn<rp>)</rp></rt> - ❌ 错误：
<rp>(</rp><rt>hàn</rt>（rp在rt外） - ❌ 错误：
<rt><rp>( </rp>hàn</rt>（含空格） - 生产环境建议统一加
rp { display: none; }，由 CSS 控制视觉，不依赖 UA 判断
移动端小屏幕下 ruby 溢出常被忽略，需主动约束宽度
很多开发者以为ruby会自动适应容器，实际上它默认按内容宽度伸展，尤其在max-width: 100%但外层无明确断点的 flex 容器中，容易把整行撑爆并触发横向滚动。这不是 bug，而是排版引擎优先保障注音对齐所致。
立即学习“前端免费学习笔记（深入）”；
- 给
ruby父容器加overflow-wrap: break-word和word-break: keep-all - 对长文本段落，用
font-size: clamp(14px, 4vw, 16px)动态缩放，避免注音层堆叠过厚 - 避免在
table-layout: fixed表格中使用ruby，列宽计算会丢失注音高度信息
最常被忽略的一点：ruby 的换行能力完全依赖父容器是否“允许换行”，而不是标签本身有没有写对。哪怕所有语法都正确，只要上层用了white-space: nowrap或没设max-width，它就只能硬挤在一行里。
