根本原因是flex子项默认min-width:auto阻止收缩，必须加min-width:0使white-space:nowrap、overflow:hidden、text-overflow:ellipsis三者联动生效，且样式须作用于文本容器而非flex父容器。
text-overflow: ellipsis 在 flex 子项上不生效，根本不是 CSS 写错了
它失效的主因是浏览器压根没触发截断逻辑——因为子项“不肯缩”。flex 容器默认让子项保持最小内容宽度（min-width: auto），哪怕父容器空间紧张，子项也优先撑开自己，导致 overflow: hidden 形同虚设。
你可能已经写了这三行：
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
但只要没加 min-width: 0，它大概率还是无效。这不是遗漏，而是 flex 布局的默认行为在“保护”内容不被压缩，和省略号需求直接冲突。
为什么必须用 min-width: 0，而不是 flex-shrink: 1 或 width: 100%
min-width: 0 是最轻量、兼容性最好、语义最清晰的解法。它明确告诉浏览器：“这个元素可以缩到 0，别卡着内容宽度不放”。而其他写法容易埋坑：
-
flex-shrink: 1看似合理，但若子项原本就设了flex-shrink: 0或flex: none，改它得同步清理所有 flex 相关声明，容易漏 -
width: 100%在 flex 里常和flex-basis冲突，尤其当父容器有 padding 或子项用了flex: 1时，宽度计算会不可控 -
max-width: 100%单独用没用，它不限制最小宽度，仍挡不住min-width: auto的默认压制
三件套必须写在文本容器上，不是 flex 父容器
常见错误是把 white-space、overflow、text-overflow 全堆在 .list-item { display: flex; } 上。这完全无效——这些属性只对**块级、有宽度约束、且负责渲染文字的元素本身**起作用。
正确结构示例：
<div class="list-item"> <span class="title">超长标题文本……</span> </div>
样式必须落在 .title 上：
.list-item { display: flex; }
.title {
flex: 1;
min-width: 0; /* 关键 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
注意：<span></span> 默认是行内元素，必须先加 display: block 或 display: inline-block 才能生效；更稳妥的做法是直接用 <div> 或 <code><p></p> 包裹文本。
多行省略别硬刚 flex + -webkit-line-clamp
text-overflow: ellipsis 天生只支持单行。想在 flex 子项里用 display: -webkit-box + -webkit-line-clamp 实现两行省略？现实是：Safari 截断错位、Chrome 可能完全不响应、Firefox 不支持——它和 flex 的基线对齐、行高计算、伸缩逻辑天然打架。
真要多行截断，务实方案只有两个：
- 服务端或 JS 预计算字数/像素宽度，截断后手动加
"…" - 用
clamp.js或react-lines-ellipsis这类成熟库，它们监听尺寸变化并动态处理，稳定得多
flex 的强项是空间分配，不是文本流控制。把省略号逻辑塞进 flex 里，等于让调度员去干排版员的活——能凑合，但边界一变就崩。
