overflow: hidden 未生效主因是容器缺失宽高；需显式设置width/height、触发BFC或用display: flow-root；单行截断须white-space: nowrap+overflow: hidden+text-overflow: ellipsis联动。
overflow: hidden 为什么没生效？
最常见的原因是容器没设宽高——overflow: hidden 只在有明确尺寸的块级容器上起作用。如果父元素是 display: inline、没写 width/height，或高度由内容撑开（比如 min-height 但没设 height），溢出部分照样会露出来。
另外注意：浮动子元素会导致父容器高度塌陷，此时即使写了 overflow: hidden，实际裁剪区域高度为 0，等于没裁。解决办法是触发 BFC（比如加 overflow: hidden 同时确保父容器有宽高），或用 display: flow-root 替代。
- 必须显式设置
width和height（或至少一个方向有约束） - 避免父容器因浮动塌陷而“看不见”裁剪边界
- 不要指望
max-width或min-height单独支撑overflow行为
单行文本截断加省略号怎么写？
只靠 overflow: hidden 不够，必须配合三属性联动：强制不换行 + 隐藏溢出 + 触发省略号。漏掉任意一个，text-overflow: ellipsis 就不生效。
典型错误是只写 overflow: hidden 和 text-overflow: ellipsis，但忘了 white-space: nowrap，结果文字照常换行，省略号根本不出。
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap—— 禁止换行 -
overflow: hidden—— 裁掉超出部分 -
text-overflow: ellipsis—— 用省略号替代被裁内容
示例：<div style="width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">超长文本内容</div>
图片溢出隐藏但又想保持比例缩放？
直接对 <img> 设 overflow: hidden 无效，因为 <img> 是替换元素，自身不支持该属性。得把它包进一个块级容器里，再对容器设裁剪。
更关键的是：如果希望图片在裁剪的同时保持宽高比（比如封面图居中裁切），要用 object-fit: cover + object-position，而不是靠 width/height 硬拉伸。
- 容器设
overflow: hidden、固定宽高 -
<img>设width: 100%、height: 100%、object-fit: cover - 需要偏移裁切区域时，加
object-position: center top等值
想让部分子元素溢出可见、部分被隐藏？
不能在顶层容器统一设 overflow: hidden，否则所有后代全被裁——这是 CSS 渲染规则，子元素设 overflow: visible 也覆盖不了父级限制。
正确做法是「分治」：给要隐藏的子元素各自套一层独立容器，并单独设 overflow: hidden；要溢出的元素（比如大图、装饰元素）则放在无裁剪限制的层级里，或用 position: absolute 脱离文档流后定位到父容器外侧。
- 蓝色圆点要裁剪？给它包个
<div class="circle-container">并设overflow: hidden - 主图要溢出？让它直属于父容器，或放进
position: absolute的子容器里 - 别试图用
z-index让被裁元素“盖住”裁剪边界——没用，裁剪发生在渲染管线底层
复杂点在于嵌套层级和定位上下文，容易忽略的是：绝对定位元素的包含块（containing block）决定了它的溢出是否受父容器控制。如果父容器没设 position: relative，那它的包含块可能是更外层元素，裁剪就可能失效。
