ruby默认不折行，长文本会溢出容器；需用inline-block包裹并设max-width和white-space:normal来实现折行，且需注意Safari兼容性及移动端rt错位问题。
ruby标签默认不折行，长文本会溢出容器
ruby 是内联元素，其内部结构（rb + rt）默认被当作一个不可分割的视觉单元。浏览器不会在 rb 文本中间断开，也不会在 rb 和 rt 之间插入换行——哪怕容器宽度只剩 1px，整个 ruby 块也会横向溢出或触发横向滚动，而不是自动折行。
常见错误现象：ruby 套了一段长中文词组（如“中华人民共和国成立七十周年纪念章”），在小屏设备上整块跑出视口右侧，读屏器朗读正常但视觉完全不可见。
- 它不响应
white-space: normal的折行逻辑，即使父容器设了width: 200px -
overflow-wrap: break-word对ruby内部的rb无效——因为rb不是普通文本流，而是 ruby 框架的一部分 - Flex/Grid 容器中，
ruby默认有min-width: auto，进一步锁死折行可能
强制折行只能靠包裹 + CSS 控制外层容器
真正可行的折行，不是操作 ruby 本身，而是把它放进一个可折行的块级上下文中，并切断其“原子性”表现。
核心做法：用 span 或 div 包一层，设 display: inline-block 或 display: block，再配合 white-space: normal 和明确的 max-width。
立即学习“前端免费学习笔记（深入）”；
- 不要直接对
ruby设display: block——部分浏览器（如 Safari 17+）会破坏rt定位，导致注音飘移 - 推荐写法：
<span style="display: inline-block; max-width: 100%; white-space: normal;"><ruby>...</ruby></span> - 若需多 ruby 项连续排列且允许折行，用
display: inline-flex; flex-wrap: wrap;包裹所有ruby，每个ruby内部加flex-shrink: 0
移动端窄屏下 rt 注音位置容易错乱
当容器变窄、ruby 被迫折成两行时，rt 默认仍试图贴在第一行 rb 顶部，结果就是注音悬空、错位、甚至叠在其他文字上。
这不是 bug，是规范行为：CSS Ruby Module Level 1 明确规定 rt 的定位基于其所属 rb 的**行框（line box）**，而非整个 ruby 块。
- 目前无纯 CSS 方案让
rt自动跟随折行后的rb片段——ruby-position: under也只控制上下方向，不解决跨行对齐 - 临时缓解：给
ruby加font-size: 0.85em缩小整体宽度，降低折行概率 - 彻底规避：服务端或 JS 预拆分长 ruby 内容，例如把“中华人民共和国”拆成两个
ruby，中间用零宽空格连接
兼容性差是硬伤，别在关键路径依赖它
ruby 在 Chrome/Firefox 中支持良好，但 Safari 对 ruby-align、ruby-merge 等高级属性几乎不支持，Edge 已随 Chromium 统一，可忽略。真正棘手的是旧 Android Webview（尤其 4.4–6.0）：渲染错位、rt 消失、或整块退化为普通内联文本。
如果你的用户仍有 >5% 来自低端安卓设备，或者内容必须 100% 可读（如教育类字词卡、无障碍考试系统），就得准备降级方案。
- 用
@supports (display: ruby)做特性检测，不支持时 fallback 到<span class="fallback-ruby">汉字<sup>zhùyīn</sup></span> - 避免在
ruby内嵌img或svg——部分 WebView 会直接崩溃或白屏 - 测试重点不是“能不能显示”，而是“折行后
rt是否还在对应字上方”，这需要真机窄屏截图验证
ruby-align: space-around，不如先确认：这个注音是否真的必须随容器宽度动态折行？还是固定字号 + 滚动容器更可控。 
