min-width: 0是绕不开的第一步，用于覆盖flex子项默认的min-width: auto，解除其对收缩的锁定，使flex-shrink生效并触发text-overflow: ellipsis；必须加在直接承载文本的子元素上，且仅支持无单位写法。
必须给文字容器加 min-width: 0，否则 text-overflow: ellipsis 永远不生效——它不是“漏写了属性”，而是 flex 布局压根没进入溢出裁剪流程。
为什么 min-width: 0 是绕不开的第一步
flex 子项默认 min-width: auto，浏览器会按最长不可折行内容（比如一个无空格 URL）算出最小宽度，并死守这个下限。哪怕父容器只剩 1px 宽，子项也宁可撑破容器，绝不缩得比它小。min-width: 0 的作用不是“把元素压扁”，而是显式覆盖掉这个隐式锁死行为，让 flex-shrink 真正开始工作。DevTools 中检查 computed 样式，如果 min-width 还是 auto，问题根源就在这里。
- 只加在直接承载文本的子元素上，例如
.item > span或.title，加在父容器.container上完全无效 - 写成
min-width: 0px或min-width: 0%在旧版 Safari/Firefox 中可能被忽略，坚持用min-width: 0（无单位）最稳 - 嵌套 flex 场景（如头像 + 文字块 + 按钮）中，内层需收缩的文字容器也要单独加，不能靠外层“继承”
text-overflow: ellipsis 生效必须配齐的三件套
它只是“画点”的装饰层，不参与尺寸计算。缺任意一个，效果就消失：
-
white-space: nowrap：必须写在目标元素上，不能靠父级继承；否则文字提前换行，“单行溢出”前提就不成立 -
overflow: hidden：只裁剪“已溢出”的内容；若min-width: auto还在锁着宽度，容器就被撑大，文本根本没溢出，这行 CSS 就等于没执行 -
text-overflow: ellipsis：仅对块级或inline-block元素生效；span类行内元素要先加display: block
这三者必须同时作用于同一元素，且该元素必须有明确宽度约束（来自父容器 width/max-width，或自身 flex-basis）。
flex: 1 和 flex: 1 1 0 的实际差别在哪
表面相似，但底层行为直接影响截断是否可靠：
-
flex: 1等价于flex: 1 1 0%，其中flex-basis: 0%是相对父容器宽度计算的百分比，而渲染前父容器宽度未定，导致基础宽度推导异常，容易被长内容卡住 -
flex: 1 1 0中的0是像素值，明确表示“初始宽度为 0px”，后续所有伸缩都基于这个确定起点，配合min-width: 0后，文本容器宽度才稳定可预期 - Safari 旧版本对
flex-basis: 0解析有偏差，必要时可补flex-basis: 0%兜底
遇到长 URL 或连续英文单词仍溢出怎么办
即使加了全部四件套（min-width: 0 + white-space: nowrap + overflow: hidden + text-overflow: ellipsis），纯文本仍可能撑开容器——因为浏览器默认不断行，没有换行机会。
- 补充
overflow-wrap: break-word（推荐）或word-break: break-word，强制在长不可折字符串内部断开 - 避免用
word-break: break-all：它会无差别断词，破坏语义，也不触发ellipsis -
<img>类替换元素需额外处理：min-width: 0+max-width: 100%，或直接设flex-shrink: 0禁止压缩
最常被忽略的不是代码，而是父容器本身没设 width 或 max-width——如果容器宽度无限，就不存在“溢出”，所有截断逻辑都失去意义；另外，overflow: hidden 必须加在真正发生溢出的那层容器上，加错层级（比如只加在外层 wrapper）等于没加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
