原生 title 属性无法可靠换行，因现代浏览器严格遵循标准忽略换行符；应改用 aria-label + CSS Tooltip 实现多行提示，确保无障碍与兼容性。
原生 title 属性无法可靠换行——所有“成功换行”的案例，本质都是浏览器 UA 的非标准兼容行为，且在 Chrome 120+、Firefox 125+、Safari 17+ 中已基本失效。
为什么 title 里的 \n、
、
看似有效其实是错觉
部分旧版浏览器（如 IE11、Chrome ≤ 80）曾将 \n 或
渲染为换行，但这不是规范行为，而是渲染引擎的偶然实现。现代浏览器严格遵循 HTML 标准：UA 必须将 title 内容视为纯文本，忽略所有控制字符（包括 CR/LF），统一折叠为空格。
常见错误现象：
• 在 VS Code 里写 title="第一行
第二行"，本地预览“好像”换行了 → 实际是编辑器或旧内核缓存误导
• 用 JS 动态赋值 el.title = "A\nB"，DevTools 显示有换行符 → 但 tooltip 仍单行显示
•
组合在某些 Electron 应用里生效 → 因为其 Chromium 内核版本滞后，不具普适性
真正能落地的多行提示：用 aria-label + CSS Tooltip 替代 title
这是当前唯一被 WCAG 2.1 和主流框架（React/Vue）推荐的无障碍方案，不依赖 JS，样式完全可控。
关键点：
• 必须用 aria-label 存原始多行文本（如 aria-label="指标名称:xxx
指标说明:yyy"），而非 title
• 用 ::before 或 ::after 伪元素生成 tooltip 容器，避免额外 DOM 节点
• tooltip 元素需设置 white-space: pre-line 保留
换行，同时加 max-width: 240px 防止溢出
• 触发方式必须支持 :hover 和 :focus-within，确保键盘用户可访问
示例最小结构：
<span class="tooltip-trigger" aria-label="错误原因:网络超时 建议操作:检查代理设置">ⓘ</span>
CSS：
.tooltip-trigger:hover::after,<br>.tooltip-trigger:focus-within::after {<br> content: attr(aria-label);<br> white-space: pre-line;<br> max-width: 240px;<br> word-break: break-word;<br>}
如果必须保留 title 属性（如 legacy 系统强约束）
只能做降级处理：把多行内容压成单行，用符号分隔，提升可读性。
• 不要用空格或顿号——易被误读为语义连接词
• 推荐用竖线 | 或破折号 —，视觉隔离强，且不会触发自动断词
• 长文本务必截断，避免 tooltip 超出视口（多数浏览器 tooltip 最大宽度 ≈ 30ch）
例如：
• 差：title="接口超时，请重试 | 可能原因：网络不稳定 | 建议：切换 WiFi"（实际显示可能截断为“接口超时，请重试 | 可能原因：网络不稳定…”）
• 好：title="超时｜查网络｜切WiFi"（7 字以内核心动作，全场景可见）
• 更稳：title="API timeout (check network)"（英文短语比中文更省空间，且多数前端监控系统日志默认英文）
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：即使你用了完美的 CSS tooltip，若目标元素是 <button> 或 <a>，仍要显式添加 tabindex="0" 才能让 :focus-within 在键盘导航时生效——这点在移动端 Safari 和 Windows High Contrast Mode 下尤为关键。
