ruby标签本身不导致乱码，但编码错误、bom、动态注入或导出时会放大问题；拼音与汉字脱节主因是窄容器中断行使rb与rt分离，需用white-space:nowrap、补rp括号、禁用rb内空格并慎用动态注入。
直接说结论：ruby 标签本身不会导致乱码，但搭配不当的编码、BOM、动态注入或打印导出时，会放大原有 HTML 编码问题，让拼音/汉字错位、丢失甚至触发解析错误。
为什么 ruby 渲染后拼音和汉字“脱节”
本质不是 ruby 有问题，而是浏览器在窄容器中对内联元素断行时，rb 和 rt 被拆到不同行，而 CSS 默认不保证它们视觉绑定。尤其当 rb 是数字或英文（如 123）时，断行策略更激进。
- 给整个
ruby片段加white-space: nowrap，但仅作用于该内联范围，不影响段落换行 - 对含数字/英文的
rb，补全rp：例如<ruby><rb>123</rb><rp>(</rp><rt>yī èr sān</rt><rp>)</rp></ruby>——这不是为 IE 兼容，而是部分安卓 WebView 在断行时会把括号和rt当作整体处理 - 避免在
rb里写空格、全角顿号或逗号；如需分隔，用零宽空格替代普通空格
Vue/React 动态生成 ruby 时 DOM 结构断裂
用字符串拼接 + v-html 或 dangerouslySetInnerHTML 注入 ruby，一旦变量含 、<code>& 或 HTML 标签（比如用户输入了 <div>第</div>），整个结构就垮了——rb 可能被截断，rt 悬空，甚至闭合错乱。
- 优先封装为组件：Vue 写
<rubytext :char="c" :pinyin="p"></rubytext>，模板里固定结构<ruby><rb>{{ char }}</rb><rt>{{ pinyin }}</rt></ruby> - 若必须字符串注入，先用
DOMPurify.sanitize()过滤，只保留ruby、rb、rt、rp标签，再塞进v-html - React 中
<rt></rt>必须是<ruby></ruby>的直接子元素；套一层<span></span>就语义失效，CSS 选择器ruby rt也匹配不到
导出 PDF 或 wkhtmltopdf 时拼音全丢
这不是 bug，是绝大多数 headless 渲染器（包括 Chrome Headless、wkhtmltopdf、多数 PDF 打印预览）压根没实现 ruby 布局模块。它只渲染 rb，忽略所有 rt、rp。
- 导出前用 JS 遍历所有
ruby，把rt文本拼到rb后面（如 “第dì”），再隐藏原rt—— 这是目前最稳的降级方案 -
@media print里不能靠display: block强拉rt出来，它根本没被解析进渲染树 - 别依赖
content伪元素模拟拼音：无法选中、复制，且部分 PDF 工具不支持伪元素内容导出
真正容易被忽略的点是：所有这些 ruby 问题，都建立在 HTML 文件本身编码干净的前提下。如果 ruby 里的汉字已经因 BOM 或响应头 charset 错配而乱码，那再怎么调样式、补 rp 都是徒劳——先确保 file -i index.html 显示 UTF-8 无 BOM，再动 ruby。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
