根本原因是浏览器为flex直接子项默认设置min-width: auto（即min-content），导致长文本撑开容器；必须在flex直接子项上显式设置min-width: 0，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis三件套才能实现省略号效果。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

flex子项被长文本撑开的根本原因 浏览器给每个 flex 直接子项默认加了 min-width: auto，等价于 min-content——也就是“至少得容下最长一行不换行的内容”。哪怕你写了 flex: 1 或 width: 0，这个隐式最小宽度也会锁死收缩底线。结果就是：URL、base64、连续英文单词直接把盒子拉宽，相邻子项被挤跑，text-overflow: ellipsis 压根不显示。

必须加 min-width: 0，且只加在 flex 直接子项上 这是唯一能真正“打开收缩开关”的写法，不是可选项：

• min-width: 0 必须写在父容器的直接子元素上，比如 .item；写在父容器或孙子元素上完全无效
• 如果子项内部还有嵌套 flex（如头像+文字并排），那内层容器也得单独加 min-width: 0
• 用 DevTools 的 Computed 面板确认真实值是否已变成 0px，别只看 Styles 里有没有那行声明

配合 text-overflow 显示省略号的三件套 min-width: 0 只是让收缩成为可能，要真正截断并显示 ...，还得齐备以下三个条件：

• white-space: nowrap：强制单行，否则文字提前换行，“溢出”就不存在
• overflow: hidden：隐藏超出部分（注意：没 min-width: 0 时它只是“藏起来”，盒子本身已被撑大）
• text-overflow: ellipsis：仅对块级元素生效，<span></span> 等行内元素得先加 display: block

漏掉任意一个，省略号都不会出现。

等分场景下别用 flex: 1，改用 flex: 1 1 0 flex: 1 实际等价于 flex: 1 1 auto，其中 flex-basis: auto 仍会读取内容宽度作为基准，等于又绕回去了。更稳妥的是：

• 显式写 flex: 1 1 0（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0）
• 或者更直白地写 flex-grow: 1; flex-shrink: 1; flex-basis: 0; min-width: 0
• 如果子项本身有 width、max-width 或 padding，记得检查 box-sizing: border-box 是否统一，否则尺寸计算会错位

真正难的不是记住这行代码，而是每次布局异常时，都要回头确认：父容器是不是 display: flex、子项是不是它的直接子代、min-width 是否被其他规则覆盖、三件套有没有写全——少一环，效果就消失。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！