根本原因是Flex子项默认min-width: auto锁死最小宽度，必须在文本元素上显式设置min-width: 0，并与white-space: nowrap、overflow: hidden、text-overflow: ellipsis四者同级共存才能生效。
为什么Flex子项加了text-overflow: ellipsis还是不生效
根本不是text-overflow写错了，而是它被Flex默认的min-width: auto锁死了。子项宁可撑破容器也不收缩，overflow: hidden压根没机会裁剪，省略号自然不会出现。
常见错误现象：
- 文字明明超长，却直接把父容器顶宽，甚至挤出屏幕
- 用
width: 100%也没用——因为min-width: auto优先级更高 - 在Chrome里偶尔有效，在Firefox里完全失效，其实是版本对
min-width处理差异
min-width: 0必须加在文本元素自身上
这是最稳、最通用的解法，不依赖父容器是否设flex-basis或flex-grow，也不需要套多一层DOM。
使用场景：卡片标题、列表项名称、导航菜单文字等需单行截断的UI组件。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
min-width: 0要写在目标文本元素（如.title）上，不是父.flex-container - 必须和
white-space: nowrap、overflow: hidden、text-overflow: ellipsis写在同一元素 - 如果同时用了
flex-shrink: 0，反而会抵消min-width: 0效果，别混用
示例：
.flex-item {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
表格单元格（<td>）和Flex混用时怎么处理
<p>表格本身有独立布局规则，<code>td在Flex容器里会表现异常——即使加了min-width: 0，也可能因table-layout未固定而失效。
必须同步处理两层约束：
- 给
table加table-layout: fixed，否则列宽由内容决定，无“溢出”前提 - 给
td加white-space: nowrap和overflow: hidden，但min-width: 0无效，改用width: 0+min-width: 0组合 - 避免把
td直接设为display: flex，会破坏表格语义和渲染逻辑
示例：
table { table-layout: fixed; width: 100%; }
td { width: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
多行省略不能靠text-overflow，得用-webkit-line-clamp
text-overflow: ellipsis天生只管单行，强行套在多行元素上毫无作用。想截3行，必须切换技术栈。
但-webkit-line-clamp极其娇气，漏一条就全崩：
- 必须同时写全：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 3、overflow: hidden -
line-height和max-height要匹配，比如line-height: 1.5em配max-height: 4.5em（3行） - Firefox只认无前缀的
line-clamp，但需用户手动开启layout.css.line-clamp.enabled（实际多数已默认开）
真正容易被忽略的，是宽度源头——Flex父容器是否设了flex-basis、子项是否意外继承了min-width: fit-content、甚至font-size缩放导致计算偏差。这些都会让“明确宽度”这个前提悄然失效，整个链条就断了。
