多音字必须拆分为独立ruby单元，否则拼音会整体漂移、对不齐汉字；每个汉字需单独包裹，混排时仅汉字套注音，动态生成需前端校验DOM结构。

多音字不能靠自动换行解决，必须拆成独立 ruby 单元，否则拼音会整体漂移、对不齐汉字。

为什么 ruby 里不能多个汉字共用一个 rt

浏览器把 苹果píng guǒ 当作一个整体：换行时 píng guǒ 可能整块跳到行首或行尾，和“苹”“果”彻底脱钩；缩放或换字体后，拼音宽度变化，rt 和 rb 的视觉对齐直接失效。这不是渲染 bug，是规范行为——rt 只绑定最近的 rb，不是按字数平均分配。

• 每个汉字必须单独包裹：苹píng果guǒ
• 混排数字/英文时，只给汉字套：第dì123页yè
• 多音字必须显式拆开处理：长zhǎng大 长cháng度，不能写成 长zhǎng/cháng

white-space: nowrap +
是控制换行位置的底线组合

红宝石注音本身不干预文本流，所以当一整行含多个 ruby 单元（比如“第一yī章 第二èr章”）需要在“章”后断行，又不能让“第一yī章”内部断开时，就得靠 CSS 锁定 +
手动切点：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 给外层容器设 white-space: nowrap，阻止所有 ruby 单元被自动挤断
• 在逻辑断点插入
，比如“章
  第”之间
• 避免对 ruby 元素本身设 display: inline-block 或 min-width，这会干扰基线对齐

长文本中混入多音字标注，怎么防溢出？

纯靠 ruby +
不足以应对响应式场景。如果整段含大量红宝石标注的文本（如古籍注释），容器变窄时仍可能横向溢出：

• 优先用 overflow-wrap: break-word，它允许在 /、-、. 等标点处断行，但不会切开汉字或拼音
• 禁用 word-break: break-all —— 它可能把“píng”切成“pí”和“ng”，破坏可读性
• 若父容器是 Flex 布局，子元素（比如装 ruby 的 span）必须加 min-width: 0，否则 overflow-wrap 失效
• 不要用 替代
，它需配合 white-space: pre 才生效，而 pre 会破坏 ruby 的默认行内布局

真正麻烦的是动态生成场景：后端拼接 ruby 标签时大小写写错（比如 ）、漏闭合、或把 rb 写成 rb（应为 ）。这些错误不会报错，但会导致整段注音消失——得靠前端校验 DOM 结构，不能只信后端输出。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！