只加 overflow: hidden 无效是因为 Flex 子项默认 min-width: auto 锁定最小宽度，需在直接子元素上加 min-width: 0 解锁收缩，再配合 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis 才能显示省略号。

为什么只加 overflow: hidden 无效

你给子元素写了 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap，但文本还是顶破容器——这不是 CSS 失效，而是 Flex 子项默认的 min-width: auto 在锁死最小宽度。浏览器宁可让容器被撑大，也不压缩内容。此时 overflow: hidden 确实“藏”了溢出部分，但用户根本看不到省略号，因为整个盒子已被拉宽。

min-width: 0 必须加在 flex 直接子项上

这个声明不是加给父容器的，也不是加给 <img alt="如何解决Flex布局下子元素被内容撑开变形_使用CSS min-width 0" > 或 <input> 这类替换元素的（它们需另处理）。它只对 flex 容器的**直接子元素**生效，且必须是块级或 inline-block 元素。

• ✅ 正确：父容器 display: flex，子 <div class="title"> 上写 <code>min-width: 0
• ❌ 错误：加在 <span></span> 或 <p></p> 内部的内联元素上（除非显式设 display: block）
• ? 调试时务必在 DevTools 的 Computed 面板里确认该子项的 min-width 真实值是否已变成 0px，别信样式面板里的声明行

单靠 min-width: 0 不会自动截断或换行

它只是解除了“不许压缩”的锁定，后续行为得靠组合规则驱动：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 要显示省略号：必须同时有 white-space: nowrap + overflow: hidden + text-overflow: ellipsis + 明确的 width 或 max-width（不能依赖 flex: 1 自动算出来的“剩余空间”）
• 要允许长单词换行：加 overflow-wrap: break-word（推荐）或 word-break: break-all，并确保该子项有 width 或 max-width
• 如果子项用了 flex: 1，建议显式写成 flex: 1 1 0，避免 flex-basis 意外取到内容宽度

移动端和 column 方向下的特殊约束

横向 flex（flex-direction: row）下，min-width: 0 主要影响主轴收缩；但在竖排（flex-direction: column）时，文本截断仍发生在行内方向（水平），所以：

立即学习“前端免费学习笔记（深入）”；

• 目标子项必须自己设 max-width: 100% 或具体值，否则即使加了 min-width: 0，它也会按内容无限延展
• 别指望 flex: 1 在 column 下自动约束水平宽度——它只管垂直方向伸缩
• 响应式场景慎用固定 min-width（如 min-width: 200px），小屏下反而加剧溢出

真正难的不是记住 min-width: 0 这个写法，而是每次遇到溢出都得回头检查：父容器有没有宽度约束、子项是不是 flex 直接子、min-width 是否被其他规则覆盖、文本截断三件套有没有写全——漏掉任意一环，效果就消失。