省略号生效需同时满足三个条件：overflow为hidden/scroll/auto、white-space为nowrap、内容实际宽度超过容器可用宽度；最常见失效原因是漏写white-space: nowrap或容器宽度未真正约束。
不依赖。省略号只是溢出后的一种视觉提示方式，不是溢出行为本身的前提；真正起作用的是 overflow: hidden 和容器尺寸约束，text-overflow: ellipsis 只是“锦上添花”——没它，文字照样被裁掉；有它，才显示 …。
为什么写了 overflow: hidden 还不生效？
因为浏览器根本没判定出“溢出”。默认文本会自动换行，内容始终在容器内，overflow 压根没机会触发。
-
white-space: nowrap是强制触发溢出的开关——它让文本拒绝换行，逼着内容横向伸展 - 容器必须有明确宽度约束：
width、max-width或 flex 下的min-width: 0（尤其在display: flex容器中，子项默认不收缩） -
overflow: hidden才能真正截断超出部分，否则即使不换行，内容也会撑开父容器
text-overflow: ellipsis 为什么有时不显示省略号？
它是个“条件型装饰”，三个条件缺一不可：
- 父容器
overflow值必须是hidden、scroll或auto（visible不行） -
white-space必须是nowrap（多行用-webkit-line-clamp，但ellipsis在多行下仅靠 CSS 不可靠） - 内容实际宽度 > 容器可用宽度（比如父容器
width: 200px，但子元素内联盒宽度超了）
常见漏写：white-space: nowrap —— 这是最常被跳过的一步，也是最隐蔽的失效原因。
立即学习“前端免费学习笔记（深入）”；
表格单元格（<td>）里加省略号为啥特别容易失败？
表格布局有自己的规则，<td> 默认是 display: table-cell，它会优先适应内容，无视 overflow，除非你主动干预：
- 给
<table>加table-layout: fixed，让列宽由col或th/td的width决定，而不是内容 -
<td>上必须同时写：white-space: nowrap+overflow: hidden+text-overflow: ellipsis+max-width: 150px（不能只靠width，因表格渲染机制特殊） - 如果还要支持悬停看全文，顺手加上
title属性：<td title="完整文本">截断文本</td>
最容易被忽略的点：省略号不是“功能开关”，而是“渲染结果”；所有失效，几乎都卡在 white-space: nowrap 没写，或容器宽度没真正约束住——别猜，用开发者工具检查 computed 样式里的 white-space 和 width 是否如你所设。
