ruby标签本身不支持自动换行，其渲染逻辑是将“基字+注音”视为不可分割的内联单元，即使容器宽度不足也不会在字间断行；真正可行的换行需将每个ruby单独包裹为inline-block元素，使其作为整体参与文本流折行。
ruby标签本身不支持自动换行
浏览器对 ruby 的渲染逻辑是「整组基字+注音」作为一个不可分割的内联单元，ruby 内部不会因容器宽度不足而折行。哪怕你给父容器设了 width: 100px，<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> 也会整体溢出或被压缩，而不是在“重”和“庆”之间断开。
常见错误现象：长地名（如“内蒙古自治区呼和浩特市”）用连续 ruby 包裹后，在窄屏上横向滚动或文字重叠；开发者误以为加 white-space: normal 就能触发折行——其实无效。
-
ruby默认行为等价于white-space: nowrap，且无法通过 CSS 改变这一基础排版规则 - 想让多字
ruby组合“看起来可换行”，只能靠外部容器控制：比如把每个ruby单独包一层span，再设display: inline-block+break-inside: avoid - iOS Safari 和部分 Android WebView 对连续
ruby的间距处理不稳定，建议父容器统一设font-size: 0，子元素再重设字号以消除间隙
用CSS强制控制ruby换行位置需绕过默认限制
真正可行的“换行”，不是让单个 ruby 折开，而是让多个 ruby 在指定位置断行。关键在于把它们变成可参与文本流折行的单元。
例如地址“北京市朝阳区建国路8号”，若每个字都带拼音，直接连写会撑破容器。此时应：
立即学习“前端免费学习笔记（深入）”；
- 每个字独立用
ruby包裹（<ruby><rb>北</rb><rt>běi</rt></ruby>...），不要合并 - 外层套一个
div并设white-space: normal（这是默认值，但显式声明更稳妥） - 给每个
ruby加display: inline-block，再配合vertical-align: top防止基线错位 - 必要时加
word-break: keep-all避免中文被意外拆字
这样，当容器变窄，浏览器会在两个 ruby 之间自然折行——不是 ruby 自己断开，而是它作为整体被当作一个“字”来参与换行计算。
ruby与pre-wrap、break-word等CSS属性基本不兼容
white-space: pre-wrap 或 overflow-wrap: break-word 对 ruby 内部内容完全无效。这些属性作用于文本节点，而 ruby 的基字（rb）和注音（rt）是独立子元素，不属于纯文本流。
典型失败场景：
- 给
ruby直接设white-space: pre-wrap：注音位置偏移，甚至消失 - 对包含
ruby的p设overflow-wrap: break-word：长英文单词能折，但ruby组合仍整体溢出 - 试图用
rt的max-width限制注音宽度：多数浏览器忽略，Safari 尤其明显
真正起作用的只有布局级干预：比如用 flex 容器 + flex-wrap: wrap 控制多个 ruby 的排列，或用 grid 显式划分格子。
移动端连续ruby的微小间距异常怎么修
iOS Safari 和部分 Android WebView 在渲染连续 ruby 时，会在它们之间插入不可见的空格宽度（约 0.1em–0.2em），导致视觉错位或换行点偏移。
这不是 bug，而是浏览器将未闭合的 ruby 标签间的换行符解析为文本节点所致。修复方式很具体：
- 确保 HTML 源码中连续
ruby之间**无任何空白字符**（包括换行、空格、制表符）：<ruby>...</ruby><ruby>...</ruby>要紧贴写 - 若源码必须可读，改用 JS 动态插入，或服务端模板预处理去除空白
- 最通用方案：父容器设
font-size: 0，每个ruby内部再设font-size: 16px（或继承所需字号） - 别依赖
letter-spacing: -0.1em微调——不同字体下效果不一致，且可能影响可访问性
这个间距问题在桌面 Chrome/Firefox 上不明显，但一旦上线到微信内置浏览器或 PWA，就会暴露。它不破坏功能，但会让对齐和换行变得不可预测。
