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 自动管多行。不复杂，但容易忽略细节。