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