必须结合 DOM 尺寸检测才能实现文本溢出时显示省略号并悬停弹 Tooltip，因纯 CSS 无法动态判断是否真正溢出；text-overflow: ellipsis 需同时满足容器有明确宽度、white-space: nowrap、overflow: hidden 才生效。
文本溢出时显示省略号、悬停才弹 Tooltip，不能靠纯 CSS 实现 —— 必须结合 DOM 尺寸检测，且关键在于「只在真正溢出时激活 Tooltip」，否则会破坏语义和性能。
text-overflow: ellipsis 为什么经常不生效
它不是独立属性，必须同时满足三个条件：容器有明确宽度（width 或 max-width）、white-space: nowrap、overflow: hidden。缺一不可。常见踩坑点是父级用了 flex 但没给子元素设 min-width: 0 或 overflow，导致 flex item 不收缩，scrollWidth 始终等于 clientWidth，检测永远为 false。
另外，text-overflow: ellipsis 只对单行有效；多行要用 -webkit-line-clamp，但该属性依赖 display: -webkit-box，且 Firefox 不支持，检测时得改用 scrollHeight > clientHeight。
如何准确判断文本是否溢出
核心逻辑是对比 DOM 元素的滚动尺寸与可视尺寸，但不同场景参数不同：
立即学习“前端免费学习笔记（深入）”；
- 单行：用
el.scrollWidth > el.clientWidth，前提是已应用white-space: nowrap - 多行：用
el.scrollHeight > el.clientHeight，前提是已用-webkit-line-clamp或 JS 控制行高 + 高度限制 - 动态内容（如异步加载、v-model 输入）：需监听
ResizeObserver，不能只靠mounted或watch文本值 - 表格单元格内：避免直接读
offsetWidth，因为 td/th 的渲染受table-layout影响，推荐用getBoundingClientRect()或强制display: block后再测
Tooltip disabled 状态怎么动态控制
Element Plus、Ant Design、Mantine 等库的 Tooltip 都提供 disabled 属性，但传 true 时组件仍会挂载、占 DOM 节点、触发事件监听 —— 这在表格中成百上千个单元格里会显著拖慢渲染。
更优做法是条件渲染：
- Vue：用
v-if="isOverflow"包裹整个<el-tooltip>，而非仅控制:disabled - React：用
{isOverflow && <Tooltip>...</Tooltip>} - 避免在
onMouseEnter中临时计算，因为悬停前就该知道要不要显示 —— 检测逻辑应在挂载或 resize 后同步完成
注意：如果使用自定义指令（如 v-ellipsis-tooltip），内部必须用 WeakMap 存储每个 el 的状态，防止内存泄漏。
响应式重检测容易被忽略的细节
窗口缩放只是其一；更隐蔽的是字体加载、locale 切换、暗色模式切换导致行高变化，都可能让原本不溢出的文本突然溢出。
因此仅监听 window.resize 不够，应优先使用：
-
ResizeObserver（推荐）：监听目标元素自身尺寸变化，兼容性到 Chrome 64+/Firefox 69+ - 若需支持旧浏览器，可 fallback 到
MutationObserver监听文本节点变动 + 定时requestAnimationFrame触发重检 - 不要在每次
props.text改变时无脑调checkOverflow()，先比对字符串长度，短文本直接跳过检测
最后提醒：表格中大量使用时，别把 ref 绑在 <td> 上 —— 它通常不含文本，而是包裹一层 <div class="ellipsis">，检测目标必须是那个带 text-overflow 样式的内层元素。
