多音字标注溢出主因是ruby盒模型失控及排版约束缺失；需限制ruby宽度、缩小rt字号、消除空白间隙，禁用white-space: nowrap，移动端需加transform: translateZ(0)修复iOS渲染偏移。
多音字标注（如拼音、注音符号、ruby）本身不会导致横向滚动，真正触发溢出的是标注元素的盒模型失控或排版未约束——尤其是ruby和rt在默认样式下可能撑宽行内容器，或与white-space: nowrap、固定宽span组合后突破父容器边界。
ruby标签默认宽度不可控，必须显式限制
ruby是行内替换元素，浏览器对其宽度计算不一致：Chrome 可能按rb+rt总宽渲染，Safari 则倾向拉伸整行。一旦父容器（如p或div）宽度固定或受flex约束，就会横向溢出。
- 给所有
ruby加display: inline-block; max-width: 100%;，防止它无限制撑开 -
rt必须设font-size: 0.6em; line-height: 1;，避免字号过大推高行高并间接拉宽 - 禁用
ruby的默认空白间隙：在ruby上加letter-spacing: -0.15em;，或对rb设margin-right: -2px;（需实测像素）
white-space: nowrap + ruby = 溢出高发组合
很多多音字标注场景会包裹在span里并加white-space: nowrap防换行，但ruby内部结构（rb文字+上方rt）会让这行实际宽度远超视觉预期，尤其含长拼音（如“chong2qing3”）时。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 绝对不要对含
ruby的容器设white-space: nowrap；改用overflow: hidden; text-overflow: ellipsis;保底线 - 若必须不换行，用
display: inline-flex; flex-wrap: nowrap;替代white-space，再配min-width: 0;让子项可收缩 - 检查是否误加了
rb的width或min-width——rb应始终由内容决定宽度
移动端 iOS Safari 的 ruby 渲染 bug 会放大溢出
iOS 16–17 的 WebKit 对ruby的text-align和direction解析异常，即使父容器max-width: 100%，rt也可能向右偏移数像素，累积后触发横向滚动条。
- 给
ruby加transform: translateZ(0);强制创建合成层，绕过部分 WebKit 排版缺陷 - 在
rt上加position: relative; right: 0;重置定位基准（不是left: 0，iOS 对left有负偏移） - 若用 CSS 自定义注音（非原生
ruby），确保sup或伪元素::after的width设为fit-content，而非auto
最易被忽略的是：多音字标注常嵌在table单元格或grid项中，而这些容器默认min-width: auto，会优先满足内容宽度——这时光靠overflow-x: hidden没用，得先在父级加min-width: 0;或width: 0;释放收缩能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
