CSS Overflow

当元素内容超出自身宽高时，多出来的部分怎么处理？overflow 属性就是答案：它可以裁剪、隐藏多余内容，或让容器出现滚动条，是防止文字溢出、裁切图片、实现省略号的必备属性。

默认值 visible

不设置 overflow 时，超出的内容照样显示出来，只是"越界"而已，可能盖住后面的元素：

div {
  width: 200px;
  height: 60px;
  /* overflow 默认是 visible：超出的文字直接露在盒子外面 */
}

hidden：直接裁剪

超出容器的内容被裁掉且无法滚动查看，适合做固定大小的图片裁切（如头像、封面图）：

.avatar {
  width: 80px;
  height: 80px;
  overflow: hidden;    /* 多余部分直接裁掉 */
  border-radius: 50%;
}
/* 效果：长方形图片被裁成圆形头像 */

scroll：总是显示滚动条

无论内容是否超出，都会显示滚动条（通常是横向、纵向各一条），保证容器可以滚动查看全部内容：

.news {
  width: 300px;
  height: 150px;
  overflow: scroll;    /* 内容过多时可上下滚动查看 */
}

auto：按需出现

只在内容真的超出时才出现滚动条，是最"聪明"、最推荐的取值：

.comment {
  max-height: 200px;
  overflow: auto;      /* 超过 200px 才出现纵向滚动条 */
}
/* 效果：短评论没有滚动条，长评论出现滚动条且不撑破版面 */

分别控制 x / y 方向

overflow-x 与 overflow-y 可以分别设置水平、垂直方向，例如代码区禁止纵向滚动、只允许横向滚动：

pre {
  overflow-x: auto;    /* 超长代码行横向滚动 */
  overflow-y: hidden;  /* 纵向固定不滚动 */
}

单行省略号小技巧

溢出处理常与文本省略配合：white-space 禁止换行 + overflow 隐藏 + text-overflow 打点，让超长标题变成"…"：

.title {
  white-space: nowrap;       /* 不换行 */
  overflow: hidden;          /* 隐藏溢出内容 */
  text-overflow: ellipsis;   /* 溢出部分显示省略号 */
}
/* 效果：超长标题只显示一行，尾部自动变成 ... */

小结

overflow 决定内容溢出后的命运：visible 外露、hidden 裁剪、scroll 常显滚动条、auto 按需滚动，还可以按 x/y 方向分别控制；配合 text-overflow 可实现单行省略号，是保持版面整洁的常用手段。