父元素需设明确宽高并触发BFC，overflow才生效；Flex/Grid子项须设min-width:0防溢出；文本溢出需配合white-space、word-break或overflow-wrap控制换行。
子元素撑开父容器导致溢出，overflow 不生效？
多数时候不是 overflow 没用，而是父元素没形成「块级格式化上下文（BFC）」或宽度未被正确约束。overflow 只对「有明确尺寸边界」的容器起作用。如果父元素 width 是 auto 且内部有不换行的长内容（比如超长 URL、连续英文、white-space: nowrap），它会优先撑宽自身，overflow: hidden 就形同虚设。
- 确保父元素设置了明确的
width或max-width（比如width: 100%、max-width: 300px） - 给父元素加
overflow: hidden或overflow: auto同时，必须配合box-sizing: border-box（避免 padding/border 额外加宽） - 若父元素是
display: inline-block或浮动元素，它默认不包裹子内容的最小宽度，需显式设宽或触发 BFC（如加overflow: hidden自身即可）
white-space 和 word-break 是溢出控制的关键搭档
单纯靠 overflow: hidden 只能“裁剪”，不能“折行”。真正防止文字溢出，得靠文本换行策略：
-
white-space: normal（默认）：允许空格换行，但连续无空格字符串（如aaaaaaaaaaaaaaaaaaaa）仍会溢出 -
word-break: break-all：强制在任意字符间断行，适合纯英文/数字场景，但可能割裂单词 -
word-break: break-word（已废弃，用overflow-wrap: break-word替代）：优先在单词内断行，更友好 -
overflow-wrap: anywhere：比break-word更激进，会在任意位置断（包括空格前），适合窄容器
div {
width: 200px;
border: 1px solid #ccc;
overflow: hidden;
word-break: break-all;
/* 或者 */
/* overflow-wrap: break-word; */
}Flex / Grid 容器中子项溢出的特殊处理
当父元素是 display: flex 或 display: grid，子项默认不收缩（flex-shrink: 1 仅对弹性空间有效，不约束内容本身）。此时即使设了 overflow: hidden，也常因子项未设 min-width: 0 而失效——这是 Flex 的默认行为：子项 min-width: auto 会阻止压缩。
- Flex 子项加
min-width: 0（或overflow: hidden，后者会隐式触发） - Grid 子项同样需要
min-width: 0，尤其当使用grid-template-columns: 1fr时 - 避免对 Flex 子项直接设
width: 100%，它可能和 flex 计算冲突；优先用flex: 1+min-width: 0
.container {
display: flex;
}
.item {
min-width: 0; /* 关键 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}调试时先检查 computed styles 里的 width 和 min-width
浏览器开发者工具里看到的 width 常是 auto，不代表它没被撑开。右键「检查元素」→ 切到「Computed」面板，重点看：width、min-width、box-sizing、overflow 四项是否符合预期。特别留意 min-width: auto 在 Flex/Grid 下的隐式影响，它比想象中更顽固。
立即学习“前端免费学习笔记（深入）”；
很多溢出问题本质不是样式写错，而是没意识到 CSS 布局模型对「最小尺寸」的默认保护机制。调 overflow 之前，先确认父容器真有「可溢出的边界」。
