text-overflow: ellipsis在Flex子项上失效的根本原因是子项默认min-width:auto锁死最小宽度，导致无法溢出；必须在flex直接子项上同时设置min-width:0、white-space:nowrap、overflow:hidden和明确宽度约束，并确保元素为块级。
为什么 text-overflow: ellipsis 在 Flex 子项上完全没反应
不是属性写错了，也不是浏览器不支持，而是 Flex 子项默认的 min-width: auto 锁死了最小宽度——哪怕父容器只剩 10px，它也坚持按文字完整宽度渲染，导致根本不会“溢出”，overflow: hidden 和 text-overflow: ellipsis 全部失效。DevTools 里看 computed min-width，大概率是几百像素，而非 0px。
必须加 min-width: 0 的位置和写法
这个声明只对 display: flex 容器的**直接子元素**生效，且必须落在你要截断文本的那个元素上：
- ❌ 给父容器（如
.list）加min-width: 0：无效，它不传递给子项 - ❌ 给嵌套结构里的孙子节点（如
.title span）加：如果span不是 flex 直接子项，也白加 - ✅ 正确做法：若
.title是 flex 容器的直接子项，就给它加min-width: 0 - ⚠️ 若
.title内部还有display: flex（比如头像+文字），那内层文字容器（如.text）也得单独加min-width: 0
text-overflow: ellipsis 生效的硬性组合
四个条件缺一不可，且必须写在同一元素上：
-
min-width: 0（横向布局）或min-height: 0（纵向布局） -
white-space: nowrap：必须和text-overflow写在同一个元素上，写在父级会提前换行 -
overflow: hidden：裁剪动作本身，但没min-width: 0时它无内容可裁 - 明确宽度约束：不能依赖
flex-basis: auto；推荐用flex: 1 1 0或显式max-width: 100%、width: 200px - 额外注意：
span等 inline 元素需加display: block或display: inline-block，否则overflow无效
图片、内联元素和移动端容易漏的点
替换元素（如 <img alt="如何修复CSS Flex布局里子元素无法省略显示的问题？" >）和内联元素同样受 min-width: auto 影响，但表现更隐蔽：
立即学习“前端免费学习笔记（深入）”；
-
<img alt="如何修复CSS Flex布局里子元素无法省略显示的问题？" >必须配max-width: 100%，否则即使加了min-width: 0，也会撑破容器 - 安卓旧 Webview 对
min-width: 0支持不稳定，可改用width: 0+flex: 1组合 - iOS Safari 滚动不灵敏？确认目标容器有
width或max-width，并补上-webkit-overflow-scrolling: touch - 不要用
-webkit-line-clamp曲线救国：它和white-space: nowrap冲突，Safari 和部分 Android 浏览器下容易换行或省略号偏移
min-width 是否真被覆盖成 0px、四件套有没有全落在同一元素上。漏掉任意一层，效果就断在中间。 
