ruby标签本身不控制换行，换行行为完全由父容器排版策略决定；多字注音须逐字独立包裹ruby，rt必须为直接子元素且不可为空；rp标签位置和内容需严格合规，否则降级失效；移动端需主动约束宽度并设置溢出处理。

ruby标签本身不控制换行，问题出在父容器排版策略

浏览器对ruby的换行行为完全继承自其父元素，ruby自己没有换行逻辑。所谓“不换行”，其实是父容器用了white-space: nowrap、display: inline-block没设宽，或flex布局中未设置flex-wrap: wrap，导致整行被强行撑开。检查 computed styles 时重点看父级的white-space和width/max-width是否缺失。

多字注音必须逐字独立包裹，否则 Safari 渲染错位

把多个汉字塞进一个ruby再配一个rt（如汉字hàn zì）是常见错误。Safari 对空格和换行更敏感，会把hàn zì当作单个拼音渲染，导致偏移或重叠。正确做法是每个字单独套一层：

<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>

• rt必须直接子元素，不能嵌在span或div里
• 服务端生成时若拼音为空，应跳过整个...，而非留空
• 避免用text-align: justify或letter-spacing干扰基文字间距

rp标签位置和内容错误会直接禁用 fallback

rp不是装饰性括号，它有严格校验：只能出现在rt内部、且内容必须是纯括号字符（(、)、[、]），多一个空格或字母就失效。Chrome 会显示括号，Safari 则隐藏——但一旦格式非法，所有浏览器都会放弃降级逻辑，导致无括号也无拼音。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• ✅ 正确：(hàn)
• ❌ 错误：(hàn（rp在rt外）
• ❌ 错误：( hàn（含空格）
• 生产环境建议统一加rp { display: none; }，由 CSS 控制视觉，不依赖 UA 判断

移动端小屏幕下 ruby 溢出常被忽略，需主动约束宽度

很多开发者以为ruby会自动适应容器，实际上它默认按内容宽度伸展，尤其在max-width: 100%但外层无明确断点的 flex 容器中，容易把整行撑爆并触发横向滚动。这不是 bug，而是排版引擎优先保障注音对齐所致。

• 给ruby父容器加overflow-wrap: break-word和word-break: keep-all
• 对长文本段落，用font-size: clamp(14px, 4vw, 16px)动态缩放，避免注音层堆叠过厚
• 避免在table-layout: fixed表格中使用ruby，列宽计算会丢失注音高度信息

最常被忽略的一点：ruby 的换行能力完全依赖父容器是否“允许换行”，而不是标签本身有没有写对。哪怕所有语法都正确，只要上层用了white-space: nowrap或没设max-width，它就只能硬挤在一行里。

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