CSS Overflow 溢出

学习 visible/hidden/scroll/auto · 难度：入门 · +10XP

CSS 溢出控制 overflow

当元素的内容超出其指定的尺寸时，overflow 属性决定了如何处理溢出的内容。掌握 overflow 对于创建可滚动的容器、截断文本和防止布局破坏至关重要。

overflow 属性值

overflow 有四个主要值，控制水平和垂直方向的溢出行为。

/* visible - 默认值，内容溢出显示 */
div {
  overflow: visible;
}
/* hidden - 溢出内容被裁剪隐藏 */
div {
  overflow: hidden;
}
/* scroll - 始终显示滚动条 */
div {
  overflow: scroll;
}
/* auto - 仅在需要时显示滚动条（推荐） */
div {
  overflow: auto;
}

单向溢出控制

你可以分别控制水平和垂直方向的溢出行为。

/* 只控制垂直方向 */
div {
  overflow-y: auto;   /* 垂直溢出显示滚动条 */
  overflow-x: hidden; /* 水平溢出隐藏 */
}
/* 横向滚动容器（如导航标签） */
.tabs {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

文本溢出省略 text-overflow: ellipsis

当文本过长时，使用省略号（...）截断是非常常见的需求。注意需要配合 overflow: hidden 和 white-space: nowrap 使用。

.text-ellipsis {
  white-space: nowrap;       /* 不换行 */
  overflow: hidden;           /* 隐藏溢出 */
  text-overflow: ellipsis;    /* 显示省略号 */
  max-width: 300px;
}
/* 多行文本截断（第 3 行后省略） */
.multi-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

overflow 属性速查表

属性值	行为	滚动条	使用场景
visible	内容可见，可能溢出	不显示	默认行为
hidden	溢出内容被裁剪	不显示	轮播图、卡片裁剪
scroll	溢出内容可滚动	始终显示	固定高度容器
auto	需要时自动滚动	按需显示	通用的可滚动区域
clip	裁剪且禁止编程滚动	不显示	高级裁剪场景

相关属性速查

属性	作用	示例
overflow-x	水平溢出控制	overflow-x: auto;
overflow-y	垂直溢出控制	overflow-y: hidden;
text-overflow	文本溢出样式	text-overflow: ellipsis;
white-space	空白和换行处理	white-space: nowrap;
word-break	单词内换行	word-break: break-all;
overflow-wrap	长单词换行	overflow-wrap: break-word;

???? 练习

1. 创建一个固定高度 200px 的 div，设置 overflow: auto 查看滚动效果
2. 实现一个超出宽度时显示省略号的单行文本
3. 制作一个横向可滚动的标签导航栏（overflow-x: auto）
4. 用 -webkit-line-clamp 实现一个三行后省略的博客摘要
5. 对比 overflow: hidden 和 overflow: clip 的区别