Flex布局中文字过长无法显示省略号，根本原因是flex项未设宽度约束导致overflow不生效；须在文字容器上同时设置min-width:0、overflow:hidden、white-space:nowrap、text-overflow:ellipsis。
Flex 布局中文字过长无法显示省略号（…），根本原因是 flex 容器默认不触发文本截断的渲染条件——text-overflow: ellipsis 必须配合 white-space: nowrap 和 overflow: hidden，且**父容器需有明确宽度限制**。而 Flex 项（flex item）在未设置约束时会优先伸缩，导致 overflow 不生效。
确保 flex 项有明确宽度约束
Flex 子元素默认是「弹性可伸缩」的，即使写了 overflow: hidden，浏览器仍可能给它无限空间，从而跳过截断逻辑。
- 给文字容器加
min-width: 0（推荐）：解决 flex item 最小尺寸默认为内容宽度的问题 - 或显式设置
width/max-width（如max-width: 200px） - 若用
flex: 1，请确保父容器宽度固定，且子项加min-width: 0
完整省略号三件套不能少
缺一不可，且必须写在同一级文字容器上：
-
overflow: hidden—— 隐藏溢出内容 -
white-space: nowrap—— 强制单行不换行 -
text-overflow: ellipsis—— 显示省略号
⚠️ 注意：这三者对 display: inline 或 inline-block 元素也有效，但对纯 flex 容器（非文字容器）无效——省略号必须作用于包裹文字的元素（如 span、p、div）。
立即学习“前端免费学习笔记（深入）”；
常见错误写法与修正
❌ 错误：把三件套写在 flex 容器（父级）上
✅ 正确：写在内部的文字包裹元素上
这是一段非常非常长的标题文字
对应 CSS：
.list-item {
display: flex;
}
.title {
flex: 1;
min-width: 0; /* 关键！允许收缩 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}多行省略？flex 下需另辟蹊径
text-overflow: ellipsis 原生只支持单行。如需多行省略（例如 2 行），不能依赖 flex + ellipsis 组合，需改用：
-
display: -webkit-box+-webkit-line-clamp（仅 WebKit 内核，兼容性有限） - CSS
container queries+clamp()配合 JS 动态截断（现代方案） - 服务端/JS 截断后加
…（最稳妥）
Flex 本身不提供多行文本截断能力，别强求它“一并解决”。
基本上就这些。核心就三点：给文字容器设 min-width: 0、三件套写对地方、别指望 flex 自动管多行。不复杂，但容易忽略细节。
