text-overflow: ellipsis生效需同时满足三个硬性条件：容器有明确宽度（如width或max-width）、white-space: nowrap、overflow: hidden，缺一不可；否则浏览器直接忽略该声明。
text-overflow: ellipsis 不是加了就生效的装饰属性，它只在三个条件同时满足时才画出省略号：容器有明确宽度约束、white-space: nowrap、overflow: hidden。漏掉任一，浏览器直接忽略该声明。
为什么 text-overflow: ellipsis 完全不显示
不是 CSS 写错了，而是触发机制被卡住：
-
overflow是visible（默认值）或auto（某些 flex 场景下计算不准），必须是hidden、scroll或auto且实际发生截断 -
white-space没设成nowrap——normal、pre-wrap下根本不会进入单行溢出判断 - 容器没设
width或max-width（哪怕用了flex: 1或grid-column: 1 / -1也不行） - 父级是
display: table-cell（如<td>），没配 <code>table-layout: fixed，列宽仍被内容撑开text-overflow: ellipsis的最小可靠写法以下四行必须共存，顺序无关，但缺一不可：
.ellipsis { max-width: 200px; /* 推荐用 max-width，比 width 更适应响应式 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }-
max-width比width更稳妥，尤其在弹性布局中 -
height不参与判断，设了也无效 - 若容器是 flex 项目，记得加
min-width: 0，否则默认min-width: auto会阻止截断 - 字体变化（比如从
14px换成16px）、letter-spacing、甚至系统渲染引擎都可能让临界像素偏移，导致“刚好不溢出”——实测比推导更可靠
含 HTML 子元素时省略号失效怎么办
text-overflow: ellipsis只对纯文本流有效。一旦子元素是<div>（<code>display: block）或<p></p>，就会打断行内格式化上下文，父级的 ellipsis 失效。- 把所有子元素强制转为行内行为：
.element > * { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - 块级子元素（如
<button></button>）可设为display: inline-block，并加vertical-align: bottom避免基线错位 - 容器自身建议设
display: inline-block，避免意外继承父级 display 类型 - 注意：伪元素（如
::before）或<img>若未设vertical-align，也会拉高行高，导致截断位置上移
多行省略不能靠
text-overflow实现，它规范里只定义对单行流生效；-webkit-line-clamp是当前最轻量方案，但 Firefox 生产环境仍不可依赖——真要跨浏览器稳定，JS 截断仍是绕不开的一环。 -
