内容溢出需对齐布局上下文、尺寸继承链和渲染行为；常见因父级无宽高约束、子元素用固定单位或white-space未作用于正确元素，且overflow必须作用于直接包裹溢出内容的块级元素。
直接说结论：内容溢出不是“加个 overflow: hidden 就完事”，而是布局上下文、尺寸继承链和渲染行为三者没对齐。多数时候，你看到的“撑破容器”，其实是父级没设宽高约束、子元素用了固定单位、或 white-space / word-break 没落到真正起作用的元素上。
为什么 overflow: hidden 加了也不生效
常见错误是只写在容器上，但溢出源在子元素内部——比如一个 <div> 里嵌了 <pre> 或 <code>，它们默认 white-space: pre，会无视父级的 overflow；又或者用了 flex 布局但没设 min-width: 0，导致文本强行撑开。
-
overflow必须作用于**直接包裹溢出内容的块级元素**，不能只写在最外层<body>或<section> - Flex 项目中，
flex: 1的项要加min-width: 0，否则它会拒绝收缩，优先撑开自身 -
<pre>、<code>、<textarea>这类元素需单独重置：white-space: pre-wrap或overflow-x: auto - 图片必须配
max-width: 100%和height: auto，否则overflow对它完全无效
text-overflow: ellipsis 显示不了省略号的真因
这个组合（white-space: nowrap + overflow: hidden + text-overflow: ellipsis）失效，90% 是因为宽度没被真正锁定：父容器用 % 或 flex 分配宽度，但祖先链上某个节点没设 width 或 max-width，浏览器无法计算“溢出起点”。
- 确保该元素有**明确的宽度限制**：要么
width，要么max-width，要么在 flex 布局中由flex-basis+min-width: 0共同确定 -
display必须是块级或 inline-block；inline元素不支持text-overflow - 不要在
<table>上直接用这套逻辑——<td>需额外包裹一层<div>才能生效 - 多行省略用
-webkit-line-clamp时，display: -webkit-box是硬性前提，且父容器不能有height冲突
表格内容溢出必须改 table-layout，不是加 word-wrap
只给 <td> 加 word-wrap: break-word 是治标不治本。浏览器默认用 table-layout: auto，它会等所有单元格内容加载完才算列宽，小屏下某列被长 URL 或图片一撑，整行就歪了。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置三样：
table-layout: fixed+width: 100%+ 至少一个<th>或<col>带width（推荐百分比，如width: 20%） -
word-break: break-all比word-wrap: break-word更激进，适合纯数字/英文 ID 列；break-word更安全，保留语义断点 -
<img>在<td>里要加max-width: 100%，否则它会直接绕过table-layout: fixed的列宽控制 - 移动端列数 ≥ 4 时，别硬扛表格结构——用
data-label+display: block降级为卡片更可靠
最容易被忽略的是：溢出问题往往藏在“看不见”的继承链里——比如一个 font-size: 1.2em 的父容器，放大后让子元素实际宽度超预期；或者某个 position: absolute 元素没设 top/left，回溯到 body 默认 margin 上，导致整体偏移。调试时先用 * { outline: 1px solid red !important } 把所有边界打出来，比盯着 CSS 查半天更快。
