嵌套flex中text-overflow: ellipsis不生效的根本原因是每层flex子项默认min-width: auto导致无法收缩，必须逐层在直接承载内容的子项上设置min-width: 0，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束才能生效。
为什么嵌套Flex里text-overflow: ellipsis不显示
根本不是text-overflow: ellipsis坏了，而是它压根没触发——嵌套的每一层display: flex子项都默认带min-width: auto，浏览器会按最长不可折行内容（比如https://a.b/c/d/e/f/g）锁定最小宽度，哪怕外层容器已缩到极限，内层也拒绝收缩。你看到文字伸出去，其实是“没溢出”，只是被撑开了。
必须逐层加min-width: 0，且只加在直接承载内容的元素上
min-width: 0不是加一次就完事。只要某一层是display: flex，且它的子项含文本、图片或input等替换元素，那一层的**直接子项**就得加min-width: 0。
- 错例：
.card { min-width: 0; }→.card是flex容器，但真正要截断的是里面的.title span，这句无效 - 对例：
.title > span { min-width: 0; }或.info > img { min-width: 0; max-width: 100%; } - 旧版Safari不认
min-width: 0px或min-width: 0%，只写min-width: 0
单行截断四件套缺一不可，顺序不能乱
光有min-width: 0只是解除了收缩锁；要让省略号出现，还得配齐另外三个，并写在同一元素上：
-
white-space: nowrap：必须写在目标元素上，不能靠父级继承；否则文字提前换行，根本不会单行溢出 -
overflow: hidden：裁剪动作本身，但若min-width: 0没生效，子项尺寸已超限，裁剪无从谈起 -
text-overflow: ellipsis：只负责画省略号，对尺寸无影响；它只对块级元素生效，所以span类行内元素得额外加display: block或display: inline-block
另外，该元素必须有明确宽度约束：来自父容器的max-width，或自身设flex-basis（推荐flex: 1 1 0，避免flex-basis: auto干扰）。
长URL或连续英文仍撑开？加overflow-wrap: break-word，但得先解锁收缩
即使四件套齐全，https://example.com/very-long-path这类无空格字符串仍会撑宽——因为浏览器默认不拆分单词。这时overflow-wrap: break-word才起作用，但它有个硬前提：
- 容器必须已被允许压缩（即已加
min-width: 0） - 必须配合
max-width: 100%或具体值（如max-width: 320px），给换行提供参照宽度 - 别混用
word-break: break-all——它会在任意字符间切分，破坏可读性
移动端小屏下尤其要注意：min-width: 0必须搭配max-width: 100%，否则在flex-direction: column中仍可能水平溢出。
最该盯住的不是代码写了没，而是DevTools里Computed面板中的三个值：min-width是否真为0px（不是auto）、flex-basis是否稳定为0px、white-space是否为nowrap。这三个不对，其他全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
