一、哪些是 overflow：hidden ？

overflow: visible;:内容会溢出容器，不会被裁剪。 当你把它改成 hidden 浏览器就会把超出父元素范围的东西全部隐藏掉，直接不体现，另起炉灶。。

最后强调一点。 当前这个属性其实很简洁，就是控制「要不要把更多余的东西给砍掉」。如果你想让页面整洁点，就能够直接加上它。

二、 最常见的采用场景

1. 卡片里的图片超出边框

小丑竟是我自己。 很更多时候我们会做一个卡片，卡片里放图片、文字。如果图片太较大，直接跑到外面去，那页面看起来就很丑。 只要在卡片外层加上：

.card{
    width:260px;
    height:180px;
    overflow:hidden; /* 关键 */
}

这样图片再较大， 也只能在卡片内部体现，更多余一部分直接被切掉，换句话说...。

2. 浮动元素引起父容器较高度塌陷

浮动以后父容器较高度会变成0，这时往往我们会加一个空白

.container{
    overflow:hidden; /* 同时也触发BFC， 包含浮动子元素 */
}

注意，这招只能在不需要滚动条的时候用，否则滚动条也会被隐藏。

3. 文字省略号配合采用

单行文字想要超出后体现 ... ， 光靠text- 踩个点。 overflow:ellipsis;不够，还得配合：

.single-line{
   width:200px;
   white-space:nowrap;
   overflow:hidden;      /* 必须要有 */
   text-overflow:ellipsis;
}

更多行省略号就更麻烦，需要 -webkit-line-clamp 之类的玩意儿，不过原理还是一样——先把容器约束住再让文字截断。

三、 实战演示：把绝对定位的角标裁进去

下面当前这个案例是我自己写的，有点乱，但能说明问题。

   NEW

阐述：

• .demo 是外层盒子， 有固定较宽较高和overflow:hidden;
• .badge 是角标，用了负值 left/top 再旋转，让它本来是跑到盒子外面的，当前被隐藏了一半，看起来更酷。
• If you forget overflow:hidden, badge will stick out and ruin layout.

四、 注意事项

• - 必须要给父容器设定较宽较高或者至更少有明确的尺寸约束，否则 hidden 没有裁剪意义。
• - 对于绝对定位子元素， 如果它们脱离了父容器的定位上下文，overflow 并不会生效。
• - 采用 flex 布局时 如果子项设置了 min-width:auto，有可能引起溢出仍然可见，需要配合 min-width:0 或者再套一层 overflow:hidden 的 wrapper。
• - 在移动端 Safari 上， 如果同时也设置了 overscroll-behavior，会作用于滚动链，需要仔细调试。
• - 别忘了兼容老 IE 浏览器， 它们对 BFC 的处理和现代化浏览器有差异，有时需要额外加 clearfix。

五、

通过本教程，我们学习了解了怎样利用 CSS `overflow:hidden` 属性来精准控制和裁剪子元素的溢出内容，尤其是在在处理绝对定位元素时。明白其工作岗位原理以及相关注意事项， 我好了。 能够协助开发者创建更加整洁、专业的网页布局，避免不必不可更少的视觉杂乱。掌握这一技巧，将使你在应对各种繁杂布局挑战时更加游刃有余。

* 较小贴士 *: 如果真实的想让页面看起来更较高级， 能够把 `overflow:hidden` 换成 `overflow:auto` 再配合自定义滚动条，但是这又是另一套故事了……反正今天先不管啦！祝较大家玩得开心~，拉倒吧...

勇敢一点... © 2026 某某菜鸟博客 | 本文纯属个人随手写作， 如有雷同纯属巧合，请勿追究版权责任。

公正地讲... #SEO #CSS #overflow_hidden #网页布局 #烂文示例