flex容器中text-overflow: ellipsis不生效的根本原因是子项默认min-width: auto阻止收缩，解决方法是必须同时设置min-width: 0、white-space: nowrap、overflow: hidden。
flex容器里text-overflow: ellipsis不生效怎么办
根本原因是 flex 项默认不收缩到内容宽度以下，min-width: auto（浏览器初始值）会阻止文本被截断。不加干预，text-overflow 就是摆设。
解决核心就一条：让 flex 子元素“愿意变窄”。最直接有效的是给它加 min-width: 0 —— 这会覆盖掉 flex 的默认最小尺寸限制，使 white-space: nowrap + overflow: hidden + text-overflow: ellipsis 联动生效。
- 必须同时设置：
white-space: nowrap、overflow: hidden、text-overflow: ellipsis - 只对单行文本有效；多行省略需用
display: -webkit-box等方案，和 flex 截断逻辑不同 - 如果父级是
flex-direction: column，要改的是min-height: 0，不是min-width
为什么不能只写overflow: hidden
overflow: hidden 单独存在时，flex 子项仍会撑开容器或自身，因为它的 min-width 默认是 auto，即“至少容纳内部 inline 内容的自然宽度”。文字再长，它也不缩。
这时候 overflow: hidden 实际没机会触发——元素压根没溢出。你看到的是文字把盒子顶宽了，而不是被裁掉。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：只加
overflow: hidden和text-overflow: ellipsis，但漏了min-width: 0 - 调试技巧：在 devtools 里临时删掉
min-width: 0，看文字是否突然撑开，就能确认是不是这个原因 - 注意兼容性：
min-width: 0在 IE10+ 和所有现代浏览器都支持，无需前缀
在flex-wrap: wrap场景下怎么处理
当 flex 容器设了 flex-wrap: wrap，子项可能换行，此时 text-overflow 通常不该起作用——你本意就是让它折行。但如果真需要某一项强制单行省略，就得额外约束它的宽度。
关键是别依赖父容器自动分配空间，而是显式控制该项的 max-width 或用 flex: 0 1 <some-width></some-width>。
- 推荐写法：
flex: 0 1 200px+min-width: 0+ 截断三件套 - 避免用
width: 200px，否则在小屏下可能破坏布局流 - 如果用
flex: 1，必须配min-width: 0，否则它会优先占满剩余空间，不给省略留余地
React/Vue里动态类名容易漏掉min-width:0
框架里常通过条件 class 控制样式，比如 className={\`item \${isTruncated ? 'truncate' : ''}\`}。这时候很容易只定义 .truncate 里的 text-overflow 相关规则，却忘了把 min-width: 0 也包进去。
结果是：class 加上了，文字还是不省略——因为 min-width 没变，还是浏览器默认的 auto。
- 安全写法：
.truncate { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - 不要拆成两个 class 分别控制尺寸和截断，容易漏或顺序错
- 在 Vue 的
:class或 React 的clsx中，确保这一整套声明都在同一个条件 class 下
真正卡住人的从来不是 text-overflow 本身，而是 flex 布局下那个隐性的 min-width: auto。它不报错、不警告，就安静地让省略号失效。只要记住：flex 项要截断，min-width: 0 是必选项，不是可选项。
