chrome和edge按像素宽度截断title tooltip，约70–85中文或120–150英文字符后省略，不换行不滚动；firefox支持自动换行但长单词仍截断；移动端基本忽略title；应改用aria属性或浮层组件实现可控tooltip。
Chrome 和 Edge 的 title tooltip 截断行为
Chrome（基于 Chromium）和 Edge 默认对 title 属性的 tooltip 文本做视觉截断，但不是按字符数，而是按**像素宽度**。实测在默认字体（如系统 San Francisco / Segoe UI / Roboto）和 16px 基础字号下，通常显示约 70–85 个中文字符或 120–150 个 ASCII 字符后出现省略号（…），且不提供滚动或换行。这个宽度阈值会随缩放比例、字体渲染设置、DPI 缩放变化——比如在 125% 缩放时，能显示的字符数明显减少。
关键点：
-
title内容过长时，浏览器不会报错或警告，只是静默截断 - 截断发生在渲染层，DOM 中
title属性值仍完整保留 - 无法通过 CSS 控制 tooltip 的宽高、换行或最大行数（
::-webkit-tooltip已废弃且无标准化支持）
Firefox 的 title tooltip 行为差异
Firefox 对 title 的处理更“宽容”：默认启用自动换行，且 tooltip 宽度可扩展至视口宽度的约 60%，最多显示 3–4 行（取决于内容长度和字号）。不过它也有硬性限制——当纯英文长单词（如 base64 字符串或无空格 URL）超过约 180 字符时，仍会截断并加省略号，因为缺乏换行断点。
常见陷阱：
- 在 Firefox 中给
title加换行符（\n或 - 即使内容可换行，tooltip 位置仍由鼠标位置决定，长文本可能被屏幕边缘裁剪
- macOS 上使用 VoiceOver 时，
title会被读出全部内容，和视觉表现不一致
移动端 Safari 和 Android Chrome 完全忽略 title
iOS Safari 自始至终不支持 title tooltip，触摸时无任何提示；Android Chrome 虽然解析 title 属性，但仅在长按触发「复制/搜索」菜单时短暂闪现，且同样截断严重（常只显示前 20 字符左右）。这意味着依赖 title 做核心信息提示的页面，在移动端基本失效。
替代方案必须前置考虑：
- 用
aria-label或aria-describedby配合隐藏元素，保障无障碍访问 - 对需要长说明的控件，改用显式 tooltip 组件（如 Tippy.js、floating-ui），控制 DOM 渲染和交互逻辑
- 避免在
title中塞 URL、错误堆栈、JSON 片段等机器可读但人类难扫读的内容
真正可控的 tooltip 替代方案选型要点
如果你需要稳定显示 200+ 字符、支持富文本、换行、延迟控制或键盘导航，title 必须放弃。现代实现应基于 aria-haspopup + role="tooltip" + 手动管理 aria-expanded 和焦点流。
几个轻量但可靠的选择：
- 用
popper.js或@floating-ui/dom管理定位，避免绝对定位偏移问题 - 对纯文字提示，CSS
content: attr(data-title)+:hover::after可应急，但不支持聚焦、键盘操作和屏幕阅读器播报 - 若项目已用 React，
react-tooltipv5+ 支持useEffect同步 aria 属性，比手写更少遗漏
最常被忽略的一点：tooltip 元素必须插入到 body 下（而非组件内部 DOM），否则可能被 overflow: hidden 父容器裁剪，且 z-index 易失控。
