text-overflow: ellipsis 在 flex 子元素上不生效，是因为默认 min-width: auto 阻止收缩，需在文本容器上同时设置 min-width: 0、white-space: nowrap、overflow: hidden 和明确宽度（如 flex: 1 1 0）。
text-overflow: ellipsis 在 flex 子元素上不显示省略号，不是漏写样式，而是浏览器根本没触发截断逻辑——因为子项被默认的 min-width: auto 锁死了最小宽度。
为什么 min-width: auto 会拦住省略号
Flex 子项默认带 min-width: auto（主轴为 row 时）或 min-height: auto（主轴为 column 时），意思是“至少得容下最长单词或整段 URL”。哪怕父容器只有 100px 宽，它也拒绝收缩，overflow: hidden 就无内容可裁，text-overflow: ellipsis 自然闲置。
常见现象包括：text-overflow 声明明明存在，但页面完全不出现省略号；文字把容器顶宽、横向滚动、或意外换行（即使写了 white-space: nowrap）。
检查方法：打开 Chrome DevTools → Elements → Computed → 找 min-width，如果值仍是 auto（不是 0px），就是它。
立即学习“前端免费学习笔记（深入）”；
必须同时满足的四个条件，且全落在同一元素上
这四点缺一不可，且必须作用于**实际承载文本的块级元素**（比如 <p> 或加了 display: block 的 <span>），不能只写在 flex 父容器上：
-
min-width: 0（无单位，不能写0px或0%）——解除收缩锁 -
white-space: nowrap——强制单行，否则文字提前折行，“溢出”前提不成立 -
overflow: hidden——裁剪动作本身 - 明确宽度约束：如
max-width: 100%、flex: 1 1 0或固定值（不能是auto）
如果该元素原本是 <span> 这类 inline 元素，还得先加 display: block 或 display: inline-block，否则 overflow 直接无效。
嵌套 Flex 场景下容易漏掉的第二层 min-width: 0
当 flex 子项内部还有 display: flex 容器（比如头像+文字块），仅在外层子项加 min-width: 0 是不够的——内层 flex 容器自己也受 min-width: auto 锁定。
必须再给最终文本容器（即内层 flex 的直接子元素）显式加 min-width: 0，并配齐其余三件套：
-
min-width: 0必须写在文本容器上，不能靠继承 - 若该文本容器还设了
flex-shrink: 0，min-width: 0会被无视，得删掉或改成flex-shrink: 1 - 旧版 Safari（≤15.6）对
flex: 1+min-width: 0组合支持不稳定，建议用flex: 1 1 0
别踩这些坑
常见错误写法：
- 把
min-width: 0加在 flex 父容器（如.list）上——它只限制自身，不影响子项收缩逻辑 - 用
min-width: 0px或min-width: 0%——Firefox 会忽略，必须用无单位的min-width: 0 - 只在外层加
min-width: 0，但内层文本容器是<span>且没加display: block和min-width: 0 - 在动态 class 中只定义了
.truncate { min-width: 0 }，但 class 没激活——样式白写
最常被忽略的其实是 white-space: nowrap：尤其当父容器用了 flex-wrap: wrap，子元素却没显式禁用换行时，文字会提前折行，连“溢出”都不存在。
