text-overflow: ellipsis在flex子元素中不生效的根本原因是min-width: auto阻止截断，必须显式设min-width: 0，并配合white-space: nowrap和overflow: hidden才能正常显示省略号。
text-overflow: ellipsis 在 flex 子元素里不显示省略号，不是漏写了 CSS，而是 flex 默认行为在拦着它生效
根本原因是：min-width: auto 这个隐式值阻止了截断逻辑触发。浏览器一看“这子项至少得容下所有文字”，哪怕你写了 overflow: hidden 和 white-space: nowrap，它也优先按内容撑开宽度，压根没机会“溢出”。flex-shrink: 1 表面看是在压缩，但压缩底线就是这个 min-content 宽度，结果常是文字换行、容器被撑宽、或相邻元素被挤跑。
必须同时满足的三个硬性条件
text-overflow: ellipsis 不是独立生效的，它只负责“画点”，前提是元素满足三条件：块级、单行、裁剪。缺一不可：
-
white-space: nowrap：强制不折行，否则文字提前换行，“溢出”都不存在 -
overflow: hidden：让超出部分不可见（注意：仅靠它不够，flex 下需配合min-width: 0） -
text-overflow: ellipsis：仅作用于块级元素，span等行内元素得先加display: block
漏掉 white-space: nowrap 是最常被忽略的点——尤其当父容器用了 flex-wrap: wrap，子元素却没显式禁用换行时。
flex 场景下真正起效的开关是 min-width: 0
这是破局关键。必须给子元素显式设置 min-width: 0（推荐）或 flex-basis: 0，它覆盖了默认的 min-width: auto，告诉浏览器：“这个子项可以缩到 0 宽度，别管内容多长”。
立即学习“前端免费学习笔记（深入）”；
常见错误写法示例：
.item {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}正确写法应补上：
.item {
flex: 1;
min-width: 0; /* 关键！ */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}或者用更紧凑的写法：
.item {
flex: 1 1 0; /* flex-grow flex-shrink flex-basis */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}容易踩的坑和兼容性提醒
几个高频翻车点：
- 把
text-overflow: ellipsis直接加在span或a上，没加display: block或display: inline-block - 父容器用了
flex-wrap: wrap，但子元素没显式设white-space: nowrap，导致文字悄悄换行 - 在 IE11 中，
min-width: 0支持不稳定，建议兜底加max-width: 100%或具体像素值 - 多行省略在 flex 布局中不可靠，
text-overflow本身只支持单行，不要指望它处理两行以上
复杂点在于：这不是一个“加几行 CSS 就好”的问题，而是 flex 布局的收缩机制和文本截断逻辑之间存在底层冲突。每次遇到失效，优先检查 min-width 和 white-space，比反复调 overflow 更有效。
