根本原因是浏览器默认给flex子项设min-width: auto（即fit-content），导致长文本撑开容器；需在直接子项上设min-width: 0并配合white-space/overflow/text-overflow或overflow-wrap等规则才能截断或换行。
为什么 flex 子项会被长文本撑开
根本原因不是 CSS 写错了，而是浏览器在 Flex 布局中默认给每个子项加了 min-width: auto。这个值等价于 min-width: fit-content，意思是“至少得容下内容本身”。一串没空格的 URL、英文 token 或中文连续字符（比如“用户输入了一大段没有换行符的文字”），会被当成一个不可分割的整体，flex 项宁可把整个容器拉宽，也不愿压缩它。
这时候你加 flex: 1、overflow: hidden 甚至 text-overflow: ellipsis 都没用——因为容器宽度早已被撑开，省略号压根没机会触发。
min-width: 0 必须加在 flex 直接子项上
这个样式只对 display: flex 的**直接子元素**生效，写在父容器或嵌套一层的内部容器上完全无效。
- ✅ 正确：给
.desc（即.container > .desc）加min-width: 0 - ❌ 错误：给
.container加min-width: 0，或给.desc > span加 - ⚠️ 嵌套 flex 场景要逐层设：如果
.desc里又套了个display: flex的头像+信息块，那信息块也得单独加min-width: 0
只写 min-width: 0 不会自动显示省略号
min-width: 0 只是“打开收缩开关”，真正让文字截断或换行，还得靠组合规则：
- 要显示省略号：必须同时有
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，且该元素需有明确宽度来源（来自父容器max-width或自身flex-basis） - 要允许长单词换行：加
overflow-wrap: break-word（推荐）或word-break: break-all（兜底），并确保父容器有width或max-width - 避免用
flex: 1简写：改用flex: 1 1 0，其中0是像素值，比flex: 1 1 0%更稳定，能防止 text-overflow 失效
移动端特别容易漏的三个点
小屏空间本就紧张，这几个细节一漏，布局立刻错乱：
- column 方向的 flex 容器里，
min-width: 0不影响垂直伸缩，但文本截断仍发生在水平方向——所以目标子项必须自己设max-width: 100%或具体值，否则照样溢出 - UI 框架（如 uni-app 的
<view></view>、Vant 的van-cell）可能自带white-space: nowrap，得手动覆盖掉 - 用
word-break: break-all处理哈希串时，别全局设；应限定在.log-token这类 class 上，避免中文被硬切成“用 户 输 入”
真正难的不是记住 min-width: 0 这行代码，而是每次看到溢出，都要顺藤摸瓜查四件事：父容器有没有 max-width、子项是不是 flex 直接子、min-width 是否被其他规则覆盖、省略号三件套是否写全且在同一元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
