text-overflow: ellipsis在Flex中失效并非bug，而是因Flex子项默认min-width: auto阻止压缩，导致无法触发溢出；必须在Flex子项上显式设min-width: 0，并配合width/max-width、white-space: nowrap、overflow: hidden三者同级生效。
text-overflow: ellipsis 为什么在 Flex 里静默失效
不是浏览器 bug，也不是你写错了样式，而是 text-overflow: ellipsis 根本没机会触发——它需要元素「先被压缩到溢出」，而默认的 Flex 子项拒绝被压窄。浏览器给每个 flex 项设了隐式 min-width: auto，意思是“至少得容下最长单词或整段 URL”，哪怕父容器只有 100px 宽，它也硬撑着不缩，overflow: hidden 就形同虚设。
- 现象：文字直接顶破容器、出现横向滚动条、或干脆换行（但你写了
white-space: nowrap） - 检查点：打开 Chrome DevTools → Elements → Computed → 找
min-width，如果显示auto（不是0px），就是它 - 注意：
min-width: auto是规范行为，不是渲染错误；现代浏览器全系都这样
必须加 min-width: 0 的三个关键位置
加错层级等于白加。min-width: 0 必须落在**直接参与 Flex 排列的容器元素上**，且这个元素得是块级（display: block 或 inline-block）。常见结构里它通常在这一层：
- 父容器：
.list { display: flex; } - Flex 子项：
.item { flex: 1; }← ✅ 这里加min-width: 0 - 子项内嵌文字标签：
min-width: 0要加在.item上，不是span - 如果用了
flex: 0 1 auto或flex: 1，照样要显式覆盖，因为这些缩写不重置min-width
三件套缺一不可，且必须同级生效
text-overflow: ellipsis 不是独立属性，它依赖一组协同样式才能激活。漏掉任意一个，就完全不显示省略号，也不报错。
- 必须有明确宽度约束：
width、max-width（百分比 /rem/px都行），不能是auto或靠flex自动算 - 必须写
white-space: nowrap—— 多行省略另说，单行截断这是硬门槛 - 必须写
overflow: hidden—— 注意父级不能有overflow: visible穿透干扰 - 三者必须写在同一选择器里，比如：
.item { min-width: 0; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
移动端和 IE11 的兼容性补丁
在 Safari 10–12 和 IE11 中，光加 min-width: 0 有时仍不稳定，尤其嵌套 Flex 或用了 inline-flex 时。
- IE11：必须确保文字容器是块级（
display: block），inline或inline-flex直接忽略text-overflow - Safari 10–12：可补
max-width: 0+flex-basis: 0强制收缩，例如：min-width: 0; max-width: 0; flex-basis: 0; - React/Vue 动态类名容易漏：别只把
text-overflow相关样式放进.truncate类，min-width: 0也得一起包进去
最常被跳过的其实是「检查 computed styles 里的 min-width 值」——声明写了不等于生效，浏览器最终计算出来才是真结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
