Flex子项截断失效的根本原因是min-width: auto锁死收缩，需显式设min-width: 0解除锁定，再配合overflow: hidden等属性才能生效；漏掉任一条件（如white-space: nowrap、父容器宽度）或存在flex-shrink: 0均会导致失败。
Flex子元素超出父容器不截断，本质不是“没写 overflow: hidden”，而是 min-width: auto 锁死了收缩能力——即使你加了 overflow: hidden，浏览器仍会优先保障子项最小宽度，导致截断失效。
为什么 overflow: hidden 单独写没用？
Flex 子项默认 min-width: auto，意思是“哪怕撑破父容器，也不允许内容被压缩到比第一行文字还窄”。这个行为会直接覆盖 overflow: hidden 的裁剪意图。开发者工具里看到 overflow: hidden 是生效的，但 computed 值里 min-width 仍是 auto，说明裁剪根本没机会触发。
必须显式覆盖这个默认值：
-
min-width: 0—— 解除收缩锁（关键一步） -
overflow: hidden—— 提供裁剪入口 -
text-overflow: ellipsis（如需省略号）—— 需配合white-space: nowrap和width或max-width
要省略号还是纯截断？参数组合完全不同
想要末尾显示 …，不能只靠 overflow: hidden。它需要三要素同时满足：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap—— 禁止换行，让文本变成单行流 -
overflow: hidden—— 裁掉溢出部分 -
text-overflow: ellipsis—— 渲染省略号
注意：text-overflow: ellipsis 只对块级或 inline-block 元素有效；如果子项是 display: inline（比如 span 默认），得先加 display: block 或 inline-block。
若只需硬性截断（不显示省略号），去掉 text-overflow 和 white-space: nowrap，保留 min-width: 0 + overflow: hidden 即可——此时长英文可能在单词中间断开，取决于是否加了 word-break: break-all。
移动端和 iOS WebView 中特别容易失效
iOS Safari 和多数 Android WebView 对 Flex 截断更敏感，漏掉任意一个条件都可能白写：
- 父容器没设
width或max-width→ 子项无边界参考，min-width: 0也救不了 - 子项继承了
white-space: nowrap（来自按钮、表格、UI 组件库）→ 即使你写了white-space: normal，也要用!important或提高选择器权重确认覆盖 - 父容器是
display: inline-flex且嵌套在span里 → 它没有块级上下文，需确保其最近块级祖先（如div）有明确宽度
真正在意兼容性时，建议直接写成：
flex-item {
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
flex-shrink: 0 会让所有截断方案彻底失效
如果子项显式设置了 flex-shrink: 0，它就拒绝任何压缩，min-width: 0 也无效。这种情况下，要么删掉 flex-shrink: 0，要么改用其他控制手段：
- 把该子项从 Flex 流中移出：用
position: absolute定位，再手动控制宽高 - 用
flex-basis配合max-width限定初始尺寸，避免它一开始就占满 - 换用 Grid 布局——Grid 的
fr单位天然支持弹性缩放，且不带min-width: auto这类隐式约束
真正难调的不是样式本身，而是你不知道哪一层继承或框架默认值悄悄关掉了截断能力。每次失效，优先查 computed 样式里的 min-width 和 white-space，而不是反复改 overflow。
