overflow: hidden 并不能自动截断文字，必须配合 white-space: nowrap、固定宽高和 text-overflow: ellipsis 才能实现单行省略；多行需 -webkit-line-clamp；它仅对 bfc 中真正溢出的内容生效，且会裁剪阴影、定位元素并禁用滚动。
直接设 overflow: hidden 并不能自动截断文字或裁剪所有溢出内容——它只对处于“块级格式化上下文（BFC）”中的、真正超出容器边界的内容生效。关键在于理解它作用的对象和前提条件。
单行文字截断并显示省略号
这是最常被误用的场景。仅写 overflow: hidden 对单行文字完全无效，因为文字默认是内联流，不会触发溢出检测。
- 必须配合
white-space: nowrap：阻止换行，让文字强制横向延伸，才可能“溢出” - 必须设置明确宽度：如
width: 200px或max-width: 100%（父容器需有确定宽度） - 必须添加
text-overflow: ellipsis：否则即使裁剪，也不会显示省略号，而是从字中间硬切
多行文字截断（两行/三行加省略号）
标准 CSS 不支持原生多行省略，目前最实用的是 -webkit-line-clamp，但它有兼容性限制。
- 必需组合：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2+overflow: hidden - 仅在 Chrome、Safari、新版 Edge 中可靠；Firefox 完全不支持
- 若内容含
<strong></strong>或其他块级子元素，可能提前截断或失效
裁剪定位元素、阴影或滚动区域
overflow: hidden 的影响远不止文字——它会静默裁掉所有超出容器 border box 的内容。
- 子元素设了
position: absolute且超出父容器？会被直接隐藏，无法点击 - 设置了
box-shadow但阴影延伸到外侧？阴影也被裁掉 - 容器内有
<textarea></textarea>或可滚动区域？滚动功能将被禁用 - 调试时某个元素“消失”，优先检查其父级是否误加了
overflow: hidden
确保 overflow: hidden 生效的前提
很多情况下它看似“失效”，其实是盒模型或布局机制没配合好。
- 父容器必须有明确宽高（或
max-width/max-height），否则没有“溢出”的参照基准 - 内部浮动或绝对定位元素会脱离文档流，导致父容器高度塌陷，
overflow失去作用范围；可用display: flow-root强制创建 BFC - 移动端 iOS Safari 对
body上的overflow: hidden支持不稳定，遮罩层建议改用position: fixed容器 -
box-sizing影响可用空间：设了padding却没预留尺寸，内容实际被挤出边界，表面看是 overflow 问题，实则是盒模型计算偏差
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
