text-overflow: ellipsis不生效是因为未同时满足三个硬性条件：必须显式设置width或max-width、white-space: nowrap、overflow: hidden，缺一不可，浏览器直接忽略该声明。
text-overflow: ellipsis 不生效？不是“设置没用”，而是三个硬性条件一个都没满足——缺一不可，浏览器直接忽略该声明。
为什么 text-overflow: ellipsis 完全不显示
它不是“增强型装饰”，而是一个严格依赖上下文的开关：只有当文本真正在单行流中被物理截断时，才会画省略号。常见失效原因：
-
white-space: nowrap漏了——这是最常被忽略的一环，normal或pre-wrap下它根本不会触发 - 容器没设
width或max-width（哪怕设了flex: 1也不行，必须是明确像素/百分比值） -
overflow是visible（默认值）或auto（某些滚动场景下计算不准） - 父级用了
display: table-cell（如td），需额外加table-layout: fixed才能约束列宽
单行省略号最小可靠写法
以下四行 CSS 缺一不可，顺序无关但必须共存：
.ellipsis {
width: 200px; /* 必须显式指定 */
overflow: hidden; /* 必须是 hidden / scroll / auto */
white-space: nowrap; /* 必须是 nowrap */
text-overflow: ellipsis;/* 此时才真正起作用 */
}
注意：max-width 比 width 更推荐，尤其在响应式布局中；height 不参与判断，设了也无效。
多行省略号为什么不能只靠 text-overflow
text-overflow 规范里明确定义：它只对「单行流」生效。多行天然破坏这个前提，所以加了也没反应。可行路径只有两条：
- WebKit/Blink 内核（Chrome/Safari/Edge）可用：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2，但 Firefox 直到 v125 才实验性支持（需手动开启 flag），生产环境不能依赖 - JS 辅助截断更稳妥：用
getComputedStyle(el).lineHeight算出每行高度，再设max-height，但要注意字体大小变化会导致临界点偏移 - 含
<img>或vertical-align的内容会干扰行高计算，导致截断位置错位
容易被忽略的细节：字体与像素级临界点
同一段 CSS，在 font-size: 14px 下可能显示省略号，换成 16px 就不显示——因为容器宽度刚好卡在换行临界像素上。letter-spacing、font-family（尤其是等宽 vs 非等宽）、甚至系统渲染引擎都可能影响最终是否触发溢出。实测比理论推导更可靠，别只看代码逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
