text-overflow: ellipsis 失效的根本原因有三：未设 white-space: nowrap、overflow 不为 hidden、容器无明确 width 或 max-width；Flex 中还需加 min-width: 0 才能生效。
text-overflow: ellipsis 为什么没反应
它不是“加了就生效”的装饰属性，而是个开关——只有当文本真正在单行内被物理截断时，才会亮起。常见失效根本原因就三个：white-space: nowrap漏了、overflow不是hidden、容器没设width或max-width（哪怕写了flex: 1也不算）。浏览器遇到任一缺失，直接忽略text-overflow: ellipsis声明。
单行省略号必须配齐的四条 CSS 规则
缺一不可，顺序无关，但必须共存：
-
width或max-width：必须是明确值（如200px、80%），flex-basis或flex: 1不触发截断 -
overflow: hidden：不能是visible（默认）、auto（滚动计算不稳定）或scroll（会显示滚动条） -
white-space: nowrap：这是最常被跳过的一步；normal、pre-wrap下它完全不工作 -
text-overflow: ellipsis：此时才真正启用
示例写法：
.ellipsis {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}Flex 容器里 text-overflow 失效怎么办
Flex 子项默认min-width: auto，会撑开自身宽度去容纳全部文字，导致overflow: hidden形同虚设。解决方法只有一条：min-width: 0。
立即学习“前端免费学习笔记（深入）”；
完整组合如下：
.flex-item {
min-width: 0; /* 关键！覆盖 flex 默认的 min-width: auto */
width: 0; /* 可选，配合 flex-grow 更稳 */
flex: 1; /* 允许伸缩 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}注意：table-cell布局也类似，需额外加table-layout: fixed才能约束列宽。
多行省略号能用纯 CSS 实现吗
能，但仅限 WebKit 内核（Chrome/Safari/Edge），Firefox 不支持-webkit-line-clamp。标准写法需三件套：
display: -webkit-box-webkit-box-orient: vertical-
-webkit-line-clamp: 2（数字为行数）
且仍要保留overflow: hidden。没有 JS fallback 的话，Firefox 用户看到的是完整换行文本，不会截断。
悬停显示完整内容倒是简单：给.ellipsis:hover加white-space: normal和overflow: visible即可，但要注意这会破坏原有布局流，建议配合position: relative或z-index微调。
真正容易被忽略的点是：所有这些规则都依赖「文本在渲染时已被强制限制在单行+固定宽度」这个前提。一旦父级用了display: contents、transform缩放、或字体加载延迟导致重排，省略号就可能闪现后消失——这种问题没法靠加更多 CSS 解决，得从渲染生命周期入手。
