必须给flex子元素加min-width: 0，因其默认auto会阻止收缩，导致overflow:hidden和text-overflow:ellipsis失效；父容器设该值无效，因flex收缩逻辑仅作用于直接子项。
加 min-width: 0 是必须的第一步，否则 overflow: hidden 和 text-overflow: ellipsis 都是摆设——因为 flex 子项默认的 min-width: auto 会强行撑开容器，根本没机会触发裁剪。
为什么 min-width: 0 必须加在子元素上，而不是父容器？
flex 的收缩逻辑只作用于直接子项。父容器设 min-width: 0 对子项无效，它只是限制自身最小宽度，和子项是否被压缩无关。浏览器计算子项尺寸时，会检查该子项自身的 min-width 计算值；如果仍是 auto（DevTools 中 computed 样式可见），那它就会按最长单词或 URL 宽度锁定最小尺寸，哪怕父容器再窄也拒绝压缩。
- ✅ 正确：给含文本的
<span></span>或<p></p>加min-width: 0 - ❌ 无效：只给
.container加min-width: 0 - ⚠️ 嵌套场景下，内层 flex 子项（如头像旁的文字块）也要单独加，不能靠外层“传染”
text-overflow: ellipsis 不生效？缺这三样就白配
text-overflow: ellipsis 在 flex 布局里不是开关式属性，它依赖四个条件同时成立：
-
white-space: nowrap—— 必须写在目标元素上，若写在父容器，子元素仍可能换行，失去“单行溢出”前提 -
overflow: hidden—— 裁剪动作本身，但没min-width: 0时，子项压根不缩，overflow就无内容可裁 -
display: block或inline-block——text-overflow只对块级盒生效，<span></span>默认是 inline，不加会失效 - 明确宽度约束 —— 不能只靠
flex: 1，它推导出的flex-basis是0%或auto，不稳定；推荐用flex: 1 1 0（第三个参数是像素值，起点确定）
flex: 1 和 flex: 1 1 0 的实际差别在哪？
两者表面相似，但底层行为差异直接影响截断是否可靠：
-
flex: 1等价于flex: 1 1 0%，0%是相对父容器宽度计算的百分比，而渲染前父容器宽度未定，导致flex-basis推导异常，容易被长内容卡住 -
flex: 1 1 0中的0是像素值，明确表示“初始宽度为 0px”，后续所有伸缩都基于这个确定起点，配合min-width: 0后，文本容器宽度才稳定可预期 - Safari 旧版本对
flex-basis: 0解析有偏差，必要时可补flex-basis: 0%兜底
最常漏掉的不是代码，而是父容器本身没设 width 或 max-width —— 如果容器宽度无限，就不存在“溢出”，所有截断逻辑都失去意义；另外，overflow: hidden 必须加在真正发生溢出的那层容器上，加错层级（比如只加在外层 wrapper）等于没加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
