text-overflow: ellipsis在表格中不生效的根本原因是td为table-cell显示类型，非块级元素，需包裹div并设display: block、white-space: nowrap、overflow: hidden、width/max-width及text-overflow: ellipsis。
text-overflow: ellipsis 为什么在表格里总不生效
根本不是属性写错了，而是 td 不是直接支持 text-overflow 的元素。浏览器规范里，text-overflow 只对块级容器生效，而 td 默认是 table-cell，white-space: nowrap 和 overflow: hidden 在它身上会被忽略或弱化。
必须加一层包裹：
<td> <div class="ellipsis-cell">超长文本内容</div> </td>
再给 .ellipsis-cell 加：
-
display: block（或inline-block） -
width: 100%或max-width: 200px white-space: nowrapoverflow: hiddentext-overflow: ellipsis
折叠后展开时 DOM 高度计算不准
用 max-height 做展开动画，但展开后文字被截断、底部消失——大概率是容器没“感知”到真实内容高度。常见于含 img、svg 或异步加载文本的场景。
关键动作不是等渲染完成，而是强制触发重排：
- 展开前先设
max-height: 0+overflow: hidden - 调用
offsetHeight（哪怕只读一次），让浏览器同步计算当前尺寸 - 再设目标
max-height（如500px），并加transition - 如果内部有图片，监听
img.onload后再执行上述流程，否则高度按 0 计算
Tooltip 只在真正溢出时显示，怎么避免每格都挂载
表格里上百个单元格，每个都套 <el-tooltip></el-tooltip> 或 <tooltip></tooltip>，性能会掉一半。不是靠 :disabled 控制，而是靠条件渲染。
检测逻辑不能放在 onMouseEnter 里临时跑——悬停前就得知道要不要显示：
- 用
ResizeObserver监听单元格尺寸变化（比window.resize更精准） - 单行判断用
el.scrollWidth > el.clientWidth，但前提是该el已应用white-space: nowrap - 多行用
el.scrollHeight > el.clientHeight，且需确保父容器有固定height或max-height - Vue 中用
v-if="isOverflow"包裹整个 Tooltip；React 中用{isOverflow && <tooltip>...</tooltip>} - 状态存进
WeakMap，键为 DOM 元素，避免内存泄漏
Flex 容器里省略号失效，min-width: 0 是开关不是可选项
写了 text-overflow: ellipsis 还是全显示？90% 是 Flex 子项拒绝收缩。Flex 默认 min-width: auto，它宁可撑破容器也不折行或截断。
加 min-width: 0 到文本容器上，不是父容器：
- 错误：
.container { display: flex; } .item { flex: 1; }→ 省略号无效 - 正确：
.item { flex: 1; min-width: 0; }或.item { min-width: 0; overflow: hidden; } - 如果用了
flex: 1，min-width: 0仍必须显式写，不能省略 - 别指望
flex-shrink: 1替代——它只在空间不足时起作用，而min-width: 0是让“空间不足”这个判断成立的前提
最易被忽略的是字体加载完成前的检测：FOUT（Flash of Unstyled Text）会让初始 scrollWidth 比实际小，导致溢出没被识别。得在 document.fonts.load() 后再跑一遍检测，或者延迟到 DOMContentLoaded 后至少 100ms。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
