需在flex子项上设置min-width: 0（或auto），再配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis才能实现文本安全截断；column方向下还需显式设置width/max-width。
flex项目里文本过长直接撑开容器怎么办
用 display: flex 布局时，子项里的长文本（比如未换行的邮箱、路径、ID）默认不折行也不截断，会强行拉宽父容器甚至破坏整体布局。这不是 flex 本身 bug，而是它默认的「最小尺寸收缩行为」在起作用。
关键不是加 overflow: hidden 就完事——那只会让内容消失，用户看不到任何信息。得配合文本截断逻辑一起用：
-
min-width: 0或min-width: auto必须加在 flex 子项上（尤其是含文本的元素），否则浏览器会按内容自然宽度计算最小尺寸，导致 flex 不收缩 - 再配
white-space: nowrap+overflow: hidden+text-overflow: ellipsis才能安全截断 - 如果子项是
<div> 或 <code><span></span>这类非替换元素，min-width: 0是最稳妥的选择；若用了<input>或图片等替换元素，可能需改用min-width: auto为什么加了 overflow: hidden 还不生效
常见现象：明明写了
overflow: hidden，文本还是跑出盒子外。根本原因是 flex 子项的min-width默认为auto，但实际表现接近「内容最小宽度」，flex 主轴不会压缩它到比内容还窄。典型错误写法：
div { display: flex; } div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }——漏掉了min-width: 0，所以截断完全不触发。- 只加
overflow: hidden不解决 flex 的收缩限制，它只是「溢出后怎么处理」，不是「要不要溢出」 -
text-overflow: ellipsis要求元素必须是块级（或 inline-block）、有明确宽度/最大宽度、且white-space: nowrap，三者缺一不可 - 在 flex 容器中，这个「明确宽度」通常靠父容器约束 + 子项自身收缩能力共同实现，
min-width: 0就是打开收缩能力的开关
flex-direction: column 场景下文本截断失效
竖排 flex 容器（
flex-direction: column）里想对某个子项做文本截断，容易忽略主轴方向变化带来的影响：此时主轴是垂直的，而文本截断依赖的是**行内方向**（水平方向）的溢出控制。立即学习“前端免费学习笔记（深入）”；
也就是说，
white-space: nowrap+text-overflow: ellipsis依然管用，但前提是该子项本身在水平方向上有宽度限制——不能让它自由撑开。- 必须给目标子项设置
width或max-width（比如max-width: 100%），否则即使加了min-width: 0，它也会按内容宽度无限延展 - 如果父容器没设宽度，子项的
100%就没意义，得从上层逐级约束宽度 - 不要试图用
height+overflow: hidden截断多行文本——那是另一套方案（line-clamp），和 ellipsis 机制不兼容
使用 text-overflow: ellipsis 时的兼容性注意点
text-overflow: ellipsis在现代浏览器里基本没问题，但有两个真实存在的坑，尤其在混合旧版环境时：- IE11 要求元素必须有
display: block或inline-block，纯display: inline不生效；Flex 子项默认是block，但若被重置成inline就会失效 - Firefox 对
flex + min-width: 0 + ellipsis的组合支持稍晚（52+ 稳定），低版本可能需要额外加overflow: hidden到父 flex 容器（不推荐，副作用大） - 移动端 Safari（iOS 15.4 之前）在某些嵌套 flex 场景下，
min-width: 0可能被忽略，临时解法是加flex-basis: 0或flex: 1强制分配空间
复杂点往往不在 CSS 属性本身，而在 flex 布局层级之间对「尺寸收敛」的隐式依赖——少一个
min-width: 0，整条链就断了。 - 只加
