Flex子项文字不截断的根本原因是默认min-width: auto阻止收缩，必须加min-width: 0覆盖该限制，再配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis三者缺一不可。
Flex子项为什么死活不截断文字
根本不是text-overflow: ellipsis写错了，而是浏览器压根没让它“溢出”——flex子项默认min-width: auto，意思是“至少得撑开到文字完整宽度”，哪怕父容器只剩1px，它也拒绝缩。这时候overflow: hidden和text-overflow: ellipsis全在干等，但等不到溢出发生。
必须加min-width: 0才能触发省略号
这是最关键的一步，其他所有属性都得给它让路：
-
min-width: 0覆盖掉min-width: auto，让子项真正“愿意变窄” - 配合
white-space: nowrap（禁换行）、overflow: hidden（裁剪）、text-overflow: ellipsis（画三点） - 三者缺一不可；漏掉
white-space: nowrap，文字直接折行，根本走不到溢出逻辑 - 如果子元素是
span这类行内元素，得先加display: block或inline-block
flex值怎么配才不翻车
常见错误是只写flex: 1就以为万事大吉，结果文字还是撑开：
-
flex: 1本身没问题，但必须搭配min-width: 0，否则它会优先占满剩余空间，不给截断留余地 - 想更稳一点，用
flex: 0 1 0（不放大、可收缩、初始尺寸为0），再加min-width: 0 - 避免
flex-shrink: 0——这等于主动锁死收缩能力，text-overflow彻底失效 - 如果父容器是
flex-direction: column，要改的是min-height: 0，不是min-width
框架里动态类名容易漏掉min-width: 0
React/Vue中常这样写：className={`item ${isTruncated ? 'truncate' : ''}`}，然后只在.truncate里定义截断样式。问题来了：
立即学习“前端免费学习笔记（深入）”；
-
min-width: 0经常被漏掉，只写了white-space和text-overflow - 结果是：类名一加上，文字突然撑开，而不是截断
- 调试时可以在 DevTools 里临时删掉
min-width: 0，看是否立刻撑开——如果是，就是它 - 兼容性不用操心：
min-width: 0在 IE10+ 和所有现代浏览器都支持
最常被忽略的其实是min-width: 0和white-space: nowrap的组合；很多人反复检查text-overflow拼写，却忘了这两个才是前置开关。
