overflow:hidden对absolute子元素不生效，最常见原因是父容器未设position:relative等非static定位，导致其无法成为包含块；此时绝对定位元素脱离文档流且裁剪失效，需确保父级或最近定位祖先提供包含块。
overflow:hidden 对 absolute 子元素不生效，因为包含块不是它
设置 overflow:hidden 后，子元素仍溢出——最常见原因是该子元素用了 position: absolute，而它的包含块（containing block）并不是当前父容器。浏览器只对「属于该容器 BFC 内部」的内容裁剪，绝对定位元素一旦脱离文档流、又没被父容器设为包含块，裁剪就完全失效。
关键判断点：getComputedStyle(child).position === 'absolute' 且 getComputedStyle(child).offsetParent !== parent，基本可确认问题在此。
- 检查父容器是否设置了
position: relative（或absolute/fixed）——这是让父容器成为包含块的必要条件 - 若中间有祖先元素也设了
position: relative，那绝对定位子元素会“跳过”父容器，直接以那个祖先为包含块，此时父容器的overflow:hidden彻底无效 - 用浏览器开发者工具的「Computed」面板查看子元素的
offsetParent，比看样式更可靠
grid 或 flex 容器里 overflow:hidden 不截断，先看 min-width/min-height
在 display: grid 或 display: flex 的容器中，子项默认有 min-width: auto（等价于 min-width: min-content），这会让浏览器优先撑开轨道，而不是压缩内容。光写 overflow:hidden 没用。
- 必须显式加
min-width: 0（水平方向）或min-height: 0（垂直方向）来解除最小尺寸锁定 - 确保容器本身有尺寸约束：比如
width、max-width、或由grid-template-columns明确定义列宽 - 若要显示省略号，还得配
white-space: nowrap+text-overflow: ellipsis，三者缺一不可 - 注意：Flex 容器子项设
flex-shrink: 0也会阻止压缩，需同步设flex-shrink: 1
文字没被截断，不是 overflow 问题，是 white-space 和 width 缺位
overflow:hidden 本身对纯文本不触发裁剪逻辑——文字是内联流，默认不断行、不形成块级溢出。你看到“没截断”，其实是根本没进入溢出检测流程。
- 必须加
white-space: nowrap阻止换行，否则文字自动折行，永远不溢出 - 容器必须有明确宽度约束：
width、max-width或由父容器/网格轨道提供固定尺寸 -
text-overflow: ellipsis只在满足前两条时才起作用；单独写它不会让文字变省略号 - 避免误用
display: flex：flex 容器子项默认不响应text-overflow，得额外设min-width: 0或改用display: block
边框(border)没被裁掉？这不是 bug，是标准行为
overflow:hidden 从不裁剪 border，也不裁 outline 或 margin。它的裁剪边界严格落在 content box + padding 区域的外边缘，而 border 绘制在 padding 外侧，天然在裁剪区之外。
- 如果你看到边框“被遮住”，大概率是背景（
background）画到了 border 区域盖住了它，应设background-clip: padding-box - 圆角裁剪要生效，必须同时设
border-radius和overflow:hidden，否则圆角只影响 border 自身形状，不改变裁剪区域 - 伪元素（如
::before）若生成了 border，那 border 本身仍可能部分露出来——因为伪元素被裁了，但它的 border 是绘制在裁切区外的 - 真正容易被忽略的是：调试时盯着 border 看“怎么没被切”，反而错过了真正该查的 content/padding 溢出点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
