多音字需人工判断上下文指定拼音，标签不识别语义，必须用多个+一一对应，加兼容旧浏览器，禁用white-space:nowrap，避免动态渲染结构断裂。
多音字必须人工判断上下文后指定拼音， 标签本身不识别语义，只忠实渲染你给的结构。 直接套用自动拼音库（比如 pinyin-pro）返回的默认读音，大概率在“重”“长”“行”这类字上出错——它不会知道“重庆”的“重”读 chóng，而“重要”的“重”读 zhòng。
为什么一个字不能只写一次
浏览器把 当作一个语义单元，一个 （注音）。如果你写成 重，拼音就变成整体标注，视觉上叠在一起、无法对齐，屏幕阅读器也读作“重，chóng zhòng”，失去区分意义。
正确做法是让每个可能读音各自成对：
- 用多个
并列，如重 重 - 确保每个
严格一一对应，数量相等 - 避免中间插入空格、换行或文本节点，否则 Safari 会丢弃部分
如何在页面中并排显示“重（chóng）”和“重（zhòng）”两种读音？
这不是靠 JS 切换，而是直接用 HTML 结构表达“同一字有不同读音”这一事实。常见于字典、识字卡、教学材料。关键在于：保留语义、控制视觉密度、兼容旧浏览器。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须加
成对包裹括号，如，否则 IE/旧 WebView 会裸露拼音 - CSS 上禁用
white-space: nowrap，否则两组注音会被挤到一行末尾折断 - 给
加微调样式，例如rt:first-of-type { color: #27ae60; }、rt:last-of-type { color: #e74c3c; }，便于区分 - 不要用
display: inline-flex或float强行并排——破坏可访问性，且在 flex 容器里行为不稳定
动态生成时最容易崩的三个点
用 Vue/React 渲染多音字 ，稍不注意结构就断裂，导致注音消失或语义丢失。
-
v-html或dangerouslySetInnerHTML拼字符串：一旦汉字含&、或 Unicode 组合字符（如带声调的ā），解析即失败，甚至触发 XSS - React 中
不是的直接子节点：比如中间插了 Fragment、条件判断标签或空格，就被忽略，屏幕阅读器跳过 - 服务端模板未归一化输入：「一会儿」在 Python 里
len('一会儿')是 3，但 pypinyin 返回 3 个拼音；若前端用正则按字切却漏掉组合字符，数量就会错位
真正麻烦的不是写法，而是确认上下文——“行长来了”里的“行”，得看前文有没有提银行；“发”在“出发”和“发展”里读音不同，但 HTML 没法自动推理。所以最稳的方式，是把多音字当作需要人工校验的字段，而不是交给自动流程兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
