小屏手机ruby注音被截断或压字，主因rt默认font-size:50%且不继承line-height；应设ruby{font-size:1em;line-height:1.8}、rt{font-size:0.6em;line-height:1;vertical-align:text-top}，并加white-space:nowrap防折行断裂。
ruby标签在小屏幕手机上注音被截断或压字
根本原因是rt默认font-size: 50%且不继承父级line-height，小屏下容器行高压缩后，拼音直接贴底甚至被裁掉。Chrome 和 Safari 表面正常，Firefox 或部分安卓 WebView 里问题更明显。
实操建议：
- 给
ruby强制设line-height: 1.8（至少比汉字字号大 0.6），别依赖默认值 - 重置基础字号：
ruby { font-size: 1em; }，再单独控制rt { font-size: 0.6em; } -
rt { line-height: 1; vertical-align: text-top; }，防 Firefox 拉高留白、iOS 上 baseline 偏移 - 禁用
ruby { display: inline-block; }——会切断内联流，导致换行错位
窄屏下「汉字+拼音」组合被错误折行
比如「第
实操建议：
- 对含
ruby的内联片段加white-space: nowrap;，只作用于该片段，不影响段落整体换行 - 数字/英文
rb内补rp包裹括号：<rp>(</rp><rt>yī èr sān</rt><rp>)</rp>，提升安卓 WebView 断行一致性 - 避免在
rb里塞空格或全角标点；如需分隔，用零宽空格替代
Vue/React 动态渲染 ruby 时结构崩溃或转义失效
用v-html或dangerouslySetInnerHTML拼接字符串，一旦字符含&、或 HTML 标签，DOM 就会提前闭合或错乱；<code>rt若不是ruby的直接子元素，语义丢失且样式失效。
实操建议：
- 优先封装组件：
<rubytext :char="c" :pinyin="p"></rubytext>，模板中明确写<ruby><rb>{{ char }}</rb><rt>{{ pinyin }}</rt></ruby> - 若必须用字符串注入，先过
DOMPurify.sanitize(htmlStr, { ALLOWED_TAGS: ['ruby', 'rb', 'rt', 'rp'] }) - React 中严禁把
rt包在span或div里再塞进ruby——它必须是直接子元素
小屏手机导出 PDF 或 wkhtmltopdf 时拼音全丢
这不是 bug，是多数 headless 渲染器压根没实现ruby布局模块。@media print也基本无效，导出后只剩汉字。
实操建议：
- 服务端导出前，用正则或 DOM 操作将
ruby结构降级为「汉字（拼音）」格式，例如汉<span class="py">(hàn)</span>，再配.py { font-size: 0.7em; } - 客户端打印前，用
window.matchMedia('print').addEventListener动态替换 DOM，避免影响屏幕浏览 - 别依赖
contenteditable或截图方案——注音位置精度差，且无法选中复制
line-height、vertical-align和ruby-position组合微调，且每改一次都得真机验证。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
