text-overflow: ellipsis生效需同时满足四个条件：明确宽度（width/max-width）、white-space: nowrap、overflow: hidden、text-overflow: ellipsis，缺一不可；其中width必须是明确值，nowrap须作用于文本元素本身，hidden与ellipsis须与前两者同级共存。
text-overflow: ellipsis 不是加了就出省略号的“装饰开关”，而是依赖四个条件同时成立才能触发的截断机制。漏掉任意一个，它就完全不工作。
为什么 text-overflow: ellipsis 没反应
最常见原因就是浏览器根本没进入“物理截断”状态——它不知道该在哪截。具体表现为文字换行、整段消失、或直接撑开容器。
-
width或max-width缺失：flex 里写flex: 1不算宽度，必须显式设width: 200px或max-width: 80% -
overflow: hidden被覆盖：父级或自身设了overflow: visible（默认值）或auto，都会让截断失效 -
white-space: nowrap漏掉：这是最容易忽略的一条；normal下文本照常换行，text-overflow直接被忽略 - Flex 子项未重置
min-width: 0：flex 默认min-width: auto，会强制撑宽内容，导致overflow: hidden形同虚设
text-overflow: ellipsis 必须配齐的四条 CSS 规则
顺序无关，但必须全部存在，缺一不可：
-
width或max-width：必须是明确值，如200px、50%；flex-basis单独写不生效 -
overflow: hidden：不能是visible、auto、scroll -
white-space: nowrap：禁用换行，这是单行截断的前提 -
text-overflow: ellipsis：此时才真正启用省略号渲染
示例写法：
.ellipsis {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Flex 容器里 text-overflow: ellipsis 失效怎么办
Flex 子项默认 min-width: auto，会优先保证文字完整显示，绕过所有截断逻辑。
- 必须加
min-width: 0—— 这是唯一解，不是可选项 - 配合
flex: 1时，建议再加width: 0，避免某些浏览器计算偏差 - 若父容器是
display: table-cell，还需额外加table-layout: fixed才能约束列宽
正确组合：
.flex-item {
min-width: 0;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行省略不能只靠 text-overflow: ellipsis
text-overflow: ellipsis 原生只支持单行。多行要用 WebKit 私有属性组合，且无标准替代方案：
- 必须用
display: -webkit-box -
-webkit-line-clamp: 2控制行数（仅数字，不支持em或rem） -
-webkit-box-orient: vertical是固定写法，不能改 - 仍需
overflow: hidden，但white-space: nowrap和width可选（因依赖行高与容器高度）
注意：-webkit-line-clamp 是非标准属性，IE 完全不支持，现代 Chrome/Firefox/Safari 支持良好，但无法响应式控制行高变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
