ruby标签在长文本中不折行的直接原因是浏览器将整个ruby结构（rb+rt）视为不可分割的字形单元，优先保持注音对齐而非断行；需显式设置white-space: normal和overflow-wrap: break-word，并在多ruby间插入，且按语言为每个ruby外层span添加对应lang属性。
ruby标签在长文本中不折行的直接原因
不是ruby本身禁止折行，而是浏览器默认把整个ruby结构（rb+rt）当作一个不可分割的“字形单元”处理——哪怕容器宽度不足，它也优先保持注音对齐关系，而不是在rb和rt之间或内部切开。这导致整段带注音的文本横向溢出、撑破布局，尤其在响应式卡片或窄列评论区里特别明显。
必须显式重置white-space和overflow-wrap
ruby元素默认继承父级white-space: normal，但一旦父容器用了pre类样式、或框架（如Bootstrap）全局设了white-space: nowrap，注音块就彻底锁死不折行。修复要分两步：
- 给
ruby自身加white-space: normal（不能只靠父级，防继承覆盖） - 同时配
overflow-wrap: break-word，让浏览器在rb边界处尝试断行——注意：它不会切开单个汉字，但允许在两个ruby之间断行，或在长拼音串（如“chóngqìngshì”）内部按字母断 - 避免用
word-break: break-all，否则拼音可能被切成“chó”“ngq씓ngshì”，失去可读性
多字连续ruby需手动插入断点
纯中文连续多个ruby（如<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>），浏览器默认不会在它们之间自动换行。此时必须在语义间隙插<wbr></wbr>：
- 插在两个
ruby标签之间：<wbr><ruby></ruby></wbr> - 如果拼音本身含连字符或斜杠（如“API-v2”），可在
rt内对应位置插<wbr></wbr>，但需确保rt的white-space也是normal - 别插在单个
rb内部（如<rb>重<wbr>庆</wbr></rb>），这会破坏汉字完整性
lang属性缺失会让折行逻辑失效
同一段里混排中/日/韩文时，仅在html根节点写lang="zh"远远不够。ruby里的rt如果是日文假名（如「ちょうけいし」），浏览器需要知道该用日文断行规则（比如标点悬挂），否则仍按中文逻辑处理，导致换行位置错乱。必须做到：
- 每个
ruby外层包裹span并设lang，例如<span lang="ja"><ruby>...</ruby></span> -
rt内容本身也要匹配lang值，如日文拼音用lang="ja"，中文拼音用lang="zh-Latn" - 不设
lang，overflow-wrap: break-word对日文假名和阿拉伯数字的断行支持会退化
真正难的不是加几个CSS，而是意识到ruby不是装饰性标签——它的折行行为由语义、语言、样式三层共同决定，漏掉任何一层，都会在小屏幕或混合文本场景下突然崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
