CSS 溢出处理

内容比容器大时怎么办？文字太长、图片太大、子元素太宽，都会让内容从盒子里漏出来。overflow 就是管这件事的属性，它决定超出部分怎么处理。

overflow 的四个值

overflow 有四个值，分别对应四种处理方式。

.box {
  overflow: visible;  /* 默认，超出部分直接露出来 */
}
.box2 {
  overflow: hidden;   /* 超出部分裁剪掉 */
}
.box3 {
  overflow: scroll;   /* 超出时显示滚动条 */
}
.box4 {
  overflow: auto;     /* 需要时显示滚动条 */
}

visible 是默认值，内容溢出时不会出现滚动条，直接显示在盒子外面。hidden 裁剪掉看不见的部分，scroll 不管有没有超出都显示滚动条，auto 最智能，只有内容溢出时才出现滚动条。

水平垂直分开控制

overflow-x 管水平方向，overflow-y 管垂直方向。

.box {
  overflow-x: hidden;   /* 隐藏横向溢出 */
  overflow-y: auto;     /* 纵向超出可滚动 */
}

卡片布局里图片太宽撑破容器，用 overflow: hidden 裁掉。列表区域内容多，用 overflow-y: auto 出现滚动条。两个方向分开写，控制更精细。

常见应用一，圆角图片裁剪

图片超出圆角容器时，配合 overflow: hidden 把图片裁进圆角里。

<style>
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
  }
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
<div class="avatar">
  <img src="head.jpg" alt="头像">
</div>

圆角对图片不生效，因为图片是方形矩形。容器加 overflow: hidden 后，超出圆角的部分被裁掉，头像就变圆了。这是头像处理的固定套路。

常见应用二，文字省略号

单行文字超出隐藏并显示省略号，需要三个属性配合。

.title {
  white-space: nowrap;       /* 不换行 */
  overflow: hidden;          /* 隐藏超出部分 */
  text-overflow: ellipsis;   /* 超出显示省略号 */
}

white-space: nowrap 让文字不换行，overflow: hidden 裁掉超出部分，text-overflow: ellipsis 在裁剪处显示省略号。三个缺一不可，这是文本效果里的经典组合。

常见应用三，图片等比缩放

响应式布局里让图片不撑破容器。

img {
  max-width: 100%;
  height: auto;
}

图片宽度超过容器时自动缩到容器宽度，高度等比变化不拉伸。这条规则在响应式设计里有详细讲解。

注意 vertical-align 的坑

行内元素垂直方向的对齐会漏出 3-5 像素的空白，比如图片底部总有一条缝隙。解决办法是给图片设 display: block 或者 vertical-align: middle。

img {
  vertical-align: middle;
}

小结

overflow 解决内容超出容器的问题。visible 默认露出，hidden 裁剪，scroll 常显滚动条，auto 按需出现。水平垂直用 overflow-x、overflow-y 分开控制。圆角裁剪图片、文字省略号、响应式图片，三个场景都要靠它。