title属性仅在text-overflow: ellipsis生效且鼠标悬停时触发，需同时满足overflow: hidden、white-space: nowrap、text-overflow: ellipsis及明确宽度；移动端基本不可用，超长内容被截断，非可靠提示方案。
title属性在text-overflow: ellipsis失效时才起作用
浏览器只在元素内容视觉上被截断（即出现省略号）且鼠标悬停时，才触发title提示。如果容器宽度足够、文字完全显示，title不会弹出——哪怕你写了title="完整文本"。这不是 bug，是规范行为。
常见误判场景：white-space: nowrap没设、overflow: hidden漏写、父容器未限定宽度，导致text-overflow: ellipsis根本没生效，此时title也静默不响。
- 必须同时满足：
overflow: hidden+white-space: nowrap+text-overflow: ellipsis+ 有明确width或max-width - Flex/Grid 容器中子项需额外加
min-width: 0防伸展，否则ellipsis常失效 -
title纯属 fallback 行为，无法监听“是否溢出”，也不能编程判断是否已触发
用JavaScript检测文本是否真实溢出再控制title显示
想让title只在真溢出时出现？得靠 JS 比较scrollWidth和clientWidth。注意：该检测必须在样式计算完成之后执行（比如offsetWidth已稳定），不能在 DOM 插入后立刻读。
典型坑点：getComputedStyle返回的width可能是auto，不能直接比；而scrollWidth包含内边距但不含滚动条，clientWidth同理，二者可安全对比。
立即学习“前端免费学习笔记（深入）”；
- 检测逻辑：
element.scrollWidth > element.clientWidth - 动态设置：
el.title = shouldShow ? fullText : ''（清空title可禁用提示） - 响应式场景下需监听
resize或使用ResizeObserver，但注意节流，避免频繁重排 - SSR 渲染时 JS 未执行，初始
title会始终存在，需服务端预判或 hydration 后立即检测
移动端 touch 设备上title基本不可用
iOS Safari 和多数 Android 浏览器对title支持极弱：不响应touchstart，长按无提示，甚至完全忽略。这不是兼容性问题，是平台策略——它们把title视为桌面专属辅助机制。
如果你的页面需在手机上展示截断文本的完整内容，title不能作为方案。替代路径只有两个：
- 点击展开浮层（如
Popover或绝对定位div），配合aria-label保证可访问性 - 用
aria-describedby关联隐藏<span class="sr-only">完整文本</span>，供屏幕阅读器读取 - 慎用
tooltip类库，很多依赖:hover伪类，在 touch 环境下失效
title内容过长会被截断且无标准长度限制
各浏览器对title字符串的渲染长度不一致：Chrome 最多显示约 120 字符（含空格），Safari 约 80，Firefox 更短。超出部分直接丢弃，不换行也不省略，用户看不到任何提示。
更麻烦的是，全角字符、Emoji、组合符（如带音标的拉丁字母）占用的“视觉宽度”与title截断逻辑无关——它只按 UTF-16 code unit 计数，导致中文实际显示字数远少于预期。
- 若后端传入的
fullText可能超长，建议在 JS 中提前截断：fullText.slice(0, 70) - 避免在
title里塞 URL、JSON 或用户输入的原始 HTML 实体（如&会显示为&） -
title不解析 HTML，所有标签符号都会原样显示，<script>就是五个字符，不是执行脚本
真正难处理的不是怎么让title出来，而是它何时不该出来、在哪儿根本出不来、以及出来后用户到底看没看见。别把它当 tooltip 用，它只是个低优先级的语义补充。
