ruby标签不支持文本环绕、内部不换行、br无效，且移动端兼容性差；需用多个独立ruby块替代br，长注音应预处理截断，必要时降级为abbr或纯文本。
ruby标签本身不支持文本环绕
ruby 是内联级语义标签，浏览器将其视为一个不可分割的“字块”（atomic inline），不会主动让周围文字绕排到它两侧。哪怕给 ruby 加 float 或 shape-outside，多数浏览器（Chrome/Firefox/Safari）仍会忽略——因为规范未定义 ruby 的浮动行为，且其内部结构（基文+rt）依赖紧密的行内布局关系。
常见误操作是给 ruby 设 display: inline-block 后试图用 margin 挤出空间诱导环绕，结果往往导致基文字与注音错位、换行异常，或在移动端触发意外截断。
- 真正需要环绕效果时，应改用普通
span+ CSS 定位模拟注音（牺牲语义但可控） - 若必须保留语义，只能接受 ruby 作为完整内联单元参与流式布局，靠调整前后间距或容器宽度间接影响折行位置
- 服务端渲染时注意：连续多个
ruby块之间不要省略空格，否则可能被合并成无间隙排列，进一步削弱“可环绕感”
ruby内部不换行，长注音会溢出
ruby 块默认启用 white-space: nowrap 行为，即基文字和对应 rt 绑定为一组，不允许在中间断开。即使容器宽度不足，rt 也不会单独折行，而是整体向右溢出或被裁剪。
例如：<ruby>非常长的词<rt>fēi cháng cháng de cí</rt></ruby> 在窄屏下会横向撑开或出现滚动条，而非把拼音拆成两行。
- 无法用
word-break或overflow-wrap强制rt折行——这些属性对rt无效 - 可行缓解方案：用
ruby { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }配合固定字号，确保不破坏布局流 - 更务实的做法是预处理注音数据，对超长拼音做截断（如只取前两字+“…”），避免后端直接吐出全量长注音
br标签在ruby内部无效
在 ruby 标签内插入 <br> 不会产生换行效果。浏览器会忽略该标签，因为 ruby 的内容模型只允许 phrasing content，而 <br> 在此上下文中不参与布局计算——它既不能分隔基文字，也不能切开 rt 内容。
错误写法：<ruby>汉<rt>hàn</rt><br>字<rt>zì</rt></ruby>，实际渲染仍是“汉字”连排，<br> 被静默丢弃。
- 想实现多音节分组显示，必须拆成多个独立
ruby块，例如：<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby> - 若需视觉上“换行”，可用
display: block包裹单个ruby，再配合margin控制垂直间距，但这已脱离内联语义初衷 - 动态注入场景中，JS 拼接字符串时要过滤掉用户输入的
<br>，否则徒增无意义 HTML
移动端 WebView 的 ruby 换行兼容性最脆弱
Android 低版本 WebView（尤其基于 Chromium 60 以下）对 ruby 的换行逻辑支持极差：同一段 HTML，在 Chrome 桌面版能正常按容器折行，在部分安卓 App 内嵌 WebView 中却整块溢出或 rt 错位到行末右侧。
这不是 bug，而是早期实现未完全遵循 WHATWG 规范中关于 ruby-position 和行盒（line box）高度计算的要求。
- 上线前务必在目标机型（特别是 Android 8–10 系统）真机测试
ruby在窄容器中的表现 - 规避方案：对关键页面检测
window.getComputedStyle(document.documentElement).rubyPosition是否为"over"，若不支持则降级为abbr[title]或纯文本拼音 - 不要依赖 autoprefixer 或 postcss-ruby 插件——目前没有成熟工具能自动 polyfill ruby 的换行行为
ruby 的核心约束始终是“一个字，一个音，不可割裂”。所有试图绕过这个前提去实现环绕或换行的操作，最终都会在某个浏览器或设备上露出破绽。真实项目里，宁可少用，也不要强行 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
