flex子项text-overflow: ellipsis失效主因是min-width: auto阻止收缩，须在直接包裹文本的flex子项上显式设min-width: 0，并配white-space: nowrap、overflow: hidden、text-overflow: ellipsis四件套。
Flex 容器里 text-overflow: ellipsis 不生效，八成不是写错了样式，而是浏览器根本没触发截断逻辑——min-width: 0 没加在对的地方，其他三件套也未必凑齐。
为什么 flex 子项上 text-overflow: ellipsis 静默失效
Flex 子项默认有 min-width: auto，意思是“至少得容下最长单词或整段 URL”。哪怕父容器只有 100px 宽，它也硬撑着不缩，overflow: hidden 形同虚设，text-overflow: ellipsis 自然没机会激活。
常见现象包括：文字把盒子顶宽、出现横向滚动条、或悄悄换行（即使写了 white-space: nowrap）。
- 打开 Chrome DevTools → Elements → Computed → 查
min-width，如果显示auto（不是0px），就是它 -
min-width: auto是规范行为，不是 bug，所有现代浏览器都这样 - 不能靠父级继承，必须显式覆盖；
min-width: 0px或min-width: 0%无效，只接受无单位的0
min-width: 0 必须加在哪一层
它必须落在**直接包裹文本、且是 Flex 直接子项的块级元素上**，不是 Flex 父容器，也不是嵌套更深的 wrapper。
- 典型结构：
.list { display: flex; }→.item { flex: 1; }→<div class="title">长文本</div>，那么min-width: 0要加在.title上 - 如果
.title是<span></span>，还得加display: block或display: inline-block，否则overflow不生效 - 嵌套 Flex 场景（如
.item > .info { display: flex; } → .info > .text），.text也得单独加min-width: 0，外层加了不管用 - 用了
flex: 1或flex: 0 1 auto？这些缩写不重置min-width，必须显式覆盖
四件套必须同级、同块、同元素
min-width: 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 这四个声明，缺一不可，且必须全部写在同一个选择器里。
- 漏掉
white-space: nowrap是最常被忽略的点——尤其当父容器用了flex-wrap: wrap，子元素却没禁用换行时，文字会悄悄换行，构不成“单行溢出”前提 - 必须有明确宽度约束：
width、max-width（百分比 /rem/px都行），不能是auto或靠 flex 自动算 - 父级不能有
overflow: visible穿透干扰，否则裁剪失效 - 示例正确写法：
.title { min-width: 0; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
React/Vue 中动态类名容易漏掉 min-width: 0
框架里常通过条件 class 控制截断，比如 className={`item ${isTruncated ? 'truncate' : ''}`}。这时候很容易只定义 .truncate 里的 text-overflow 相关规则，却忘了把 min-width: 0 也包进去。
- 别只写：
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - 要写全：
.truncate { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; } - 如果用了
flex: 1 1 0（注意是数字0，不是0%），比flex: 1更稳，能进一步压制 flex-basis 的干扰 - 含长 URL 或连续英文单词时，补
word-break: break-word或overflow-wrap: break-word，否则浏览器仍按单词整体计算最小宽度
真正复杂的是嵌套层级和宽度控制链——min-width: 0 加对了，但父容器用了 fit-content、flex-grow 没收敛、或者某层忘了关 flex-shrink: 0，整个截断就又断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
