在线词典中ruby标注多音字需逐字独立声明读音、用rp嵌套+css隐藏实现兼容、通过class切换避免重排、并用overflow或flex-wrap解决溢出问题。
在线词典里用 ruby 标注单字读音必须逐字包裹
在线词典查“重”字，不能写成 <ruby>重<rt>chóng</rt></ruby> 就完事——看似对了，但遇到“重庆”“重要”这类多音场景，用户点选不同词条时，拼音必须随语境切换。浏览器不会自动识别上下文，ruby 也不解析语义。你得把每个字的读音独立声明：<ruby>重<rt>chóng</rt></ruby> 和 <ruby>重<rt>zhòng</rt></ruby> 是两个完全不同的 DOM 节点，服务端或 JS 渲染时得按词义动态插入对应版本。
常见错误是后端模板一股脑拼接整词拼音：<ruby>重庆<rt>chóng qìng</rt></ruby>，结果 Safari 把 “chóng qìng” 挤在两个字正上方，视觉错位；Chrome 虽能勉强对齐，但无法单独高亮“重”字的变调样式。
ruby + rp 在词典页面降级显示时括号不出现
词典要兼顾老旧邮件客户端、部分安卓 WebView 或 IE11 用户，rp 是必需的兜底结构，但直接写 <rp>(</rp><rt>hàn</rt><rp>)</rp> 在 Chrome 里会把括号和拼音一起显示出来，变成“汉(hàn)”，而 Safari 可能只渲染拼音、忽略括号——同一段 HTML，两套视觉。
正确做法是把 rp 严格嵌在 rt 内部：<rt><rp>(</rp>hàn<rp>)</rp></rt>，再加一行 CSS 强制隐藏：ruby rt rp { display: none !important; }。这样现代浏览器只显示上标拼音，老环境才 fallback 到“汉(hàn)”形式。不加这行 CSS，词典页面在 Chrome 下会显得冗余混乱。
词典中多音字切换需避免 DOM 重排导致页面跳动
用户点击“重（zhòng）量”切换到“重（chóng）复”，如果用 JS 替换整个 ruby 节点，浏览器会触发重排，尤其在密集排版的释义列表里，相邻文字可能瞬间上移或下移，体验割裂。
更稳的做法是预先渲染所有可能读音，用 class 控制显隐：<ruby class="pinyin-active">重<rt>zhòng</rt></ruby><ruby class="pinyin-inactive">重<rt>chóng</rt></ruby>
切换时只改 class，CSS 设 .pinyin-inactive { display: none; }。注意：不能用 visibility: hidden，否则屏幕阅读器仍会朗读隐藏拼音，造成干扰。
词典响应式布局下 ruby 拼音溢出容器的修复方式
移动端词典卡片宽度有限，“一衣带水”这种四字成语逐字标注后，拼音总宽常超出容器，浏览器默认不折行，导致最右边拼音被裁切或压进下一个词块。
关键不是给 ruby 加 white-space: nowrap（它本就不换行），而是控制父容器行为：
- 父元素设 overflow-x: auto 并加 scrollbar-width: none（Firefox）和 -webkit-scrollbar { display: none; }（WebKit）隐藏滚动条，允许横向滑动查看完整拼音
- 或用 ruby { display: inline-flex; flex-wrap: wrap; } 强制换行，但必须配合 rb 显式包裹（<ruby><rb>一</rb><rt>yī</rt></ruby>），否则 flex 会破坏基字与拼音的绑定关系
- 绝对禁止用 transform: scale() 缩小 rt，缩放后基线偏移，放大字体时拼音会漂移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
