text-overflow: ellipsis在flex中不生效，根本原因是flex子项默认min-width: auto，阻止内容收缩导致无法溢出；必须显式设置min-width: 0，配合white-space: nowrap和overflow: hidden才能触发省略号。
text-overflow: ellipsis 为什么在 flex 里不显示省略号
根本不是 text-overflow 本身坏了，而是 flex 子项默认 min-width: auto，浏览器强制它至少撑开到最长单词或整段文本的自然宽度——压根没“溢出”，overflow: hidden 和 text-overflow: ellipsis 就全被跳过。
常见现象包括：文字把容器顶宽、换行却不截断、加了三件套但省略号死活不出现。DevTools 里看 computed min-width 如果还是 auto，基本就是这个原因。
-
white-space: nowrap必须有，否则文字提前折行，连“单行溢出”前提都不满足 -
overflow: hidden单独加没用，它只裁剪“已溢出”的内容，而min-width: auto让它根本溢不出 -
text-overflow: ellipsis是纯装饰层，不参与尺寸计算，依赖前两者生效
flex 子项必须加 min-width: 0 才能触发收缩
min-width: 0 是唯一能覆盖浏览器默认 min-width: auto 的写法。它不是“设最小宽度为 0”，而是告诉 flex 布局：“允许我缩到比内容还小”，从而让 flex-shrink 真正起作用。
注意：flex: 1 默认等价于 flex: 1 1 0%，其中 0% 是 flex-basis，不是 min-width；就算 flex-basis 是 0，只要 min-width 还是 auto，子项照样不缩。
- 对文字容器、图标+文本组合、动态渲染的卡片都适用
- 若子项内部还有 flex 容器（比如头像 + 信息块），内层也要加
min-width: 0，否则内层先撑爆 - Safari ≤14.1 对
white-space: nowrap+min-width: 0组合支持不稳定，可临时加flex-shrink: 0+overflow: hidden保底
flex: 1 1 0 和 flex: 1 的关键区别
flex: 1 隐式设了 flex-basis: 0%，但百分比值在 flex 计算中容易引发宽度推导异常，尤其配合文字内容时，text-overflow 更易失效。显式写成 flex: 1 1 0（注意是数字 0，不是 0%）更可控——flex-basis: 0px 强制从零开始均分剩余空间，和 min-width: 0 协同性更好。
- 别用
flex: 0 1 200px这类带固定flex-basis的写法，它会卡死收缩起点，小屏下反而更容易溢出 - 想保留内容基础宽度又允许压缩？用
flex: 1 1 auto+min-width: 0，比硬设min-width: 200px更适应响应式 -
flex-shrink: 0是另一条路，但会彻底禁用弹性，仅适合开关、图标按钮等尺寸必须守恒的原子元素
父容器宽度约束常被忽略
再怎么给子项加 min-width: 0 和截断三件套，如果父容器本身没宽度限制（比如只写了 display: flex，没设 width、max-width 或受外层影响为 fit-content），整个 flex 容器就会无限宽，子项再怎么缩也没意义。
- 移动端务必检查父容器是否设了
max-width: 375px或width: 100%类似约束 - 避免在 flex 子项上写
width: 100%，它和flex: 1冲突，可能绕过伸缩逻辑 - 使用
flex-wrap: wrap能缓解溢出，但会改变布局语义；真要单行截断，就得靠父容器宽度 + 子项min-width: 0+ 截断三件套闭环
min-width: 0 允许压缩 → white-space: nowrap + overflow: hidden 触发裁剪 → text-overflow: ellipsis 渲染省略号。少一环，就白配。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
