HTML中ruby标签在不同行宽下的折行机制-html教程-PHP中文网

ruby默认不折行，长文本会溢出容器；需用inline-block包裹并设max-width和white-space:normal来实现折行，且需注意safari兼容性及移动端rt错位问题。

html中ruby标签在不同行宽下的折行机制

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。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

不要直接对 ruby 设 display: block——部分浏览器（如 Safari 17+）会破坏 rt 定位，导致注音飘移
推荐写法：<ruby>...</ruby>
若需多 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% 可读（如教育类字词卡、无障碍考试系统），就得准备降级方案。