加 min-width: 0 到 flex 直接子元素是解决文字撑开容器最有效且易被忽略的一步，因浏览器默认设 min-width: auto（即 fit-content），导致 overflow: hidden 和 white-space: nowrap 失效，省略号无法触发。
直接加 min-width: 0 到 flex 直接子元素上，是解决文字撑开容器最有效、也最容易被跳过的一步。
为什么 text-overflow: ellipsis 在 flex 里不生效
不是 CSS 写错了，而是浏览器默认给每个 flex 子项加了 min-width: auto（等价于 fit-content），强制它至少容下所有文字。哪怕你写了 overflow: hidden 和 white-space: nowrap，容器宽度早已被撑开，省略号根本没机会触发。
-
text-overflow: ellipsis只对块级、单行、有明确宽度限制的元素起作用 - 漏掉
white-space: nowrap是高频错误——尤其当父容器设了flex-wrap: wrap，子项却没显式禁用换行时 -
span等行内元素必须先加display: block或display: inline-block才能支持text-overflow
min-width: 0 必须加在 flex 直接子项上
这个样式只对 display: flex 容器的**第一层子元素**生效。写在父容器、嵌套内部容器、或伪元素上都无效。
- ✅ 正确：
.desc { min-width: 0; }（假设.desc是.container的直接子） - ❌ 错误：
.container { min-width: 0; }，或.desc > span { min-width: 0; } - ⚠️ 嵌套 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 方向下的易漏点
小屏空间紧张，这几个细节一漏，布局立刻错乱：
- column 方向的 flex 容器里，
min-width: 0不影响垂直伸缩，但文本截断仍发生在水平方向——所以目标子项必须自己设max-width: 100%或具体值，否则照样溢出 - UI 框架（如 uni-app 的
<view>、Vant 的van-cell）可能自带white-space: nowrap，得手动覆盖掉 - 用
word-break: break-all处理哈希串时，别全局设；应限定在.log-token这类 class 上，避免中文被硬切成“用户输”
真正难的不是记住 min-width: 0 这行代码，而是每次看到溢出，都要顺藤摸瓜查四件事：父容器有没有 max-width、子项是不是 flex 直接子、min-width 是否被其他规则覆盖、text-overflow 三件套有没有写全。
