CSS 溢出
03-css2026/11/14
CSS 的 overflow 属性用于控制当元素内容超出其指定区域时的表现方式。
overflow 基础
overflow 属性定义当内容溢出元素框时发生的事情。
基本语法：
overflow: visible | hidden | scroll | auto | clip;
overflow-x：控制水平方向溢出overflow-y：控制垂直方向溢出
overflow 取值详解
| 值 | 说明 | 示例 |
|---|---|---|
| visible | 默认值，内容溢出显示 | 内容超出容器仍可见 |
| hidden | 内容溢出隐藏，不显示，也不滚动 | 剪切溢出部分 |
| scroll | 内容溢出显示滚动条（无论是否溢出都会显示） | 横向/纵向滚动条 |
| auto | 内容溢出时显示滚动条，否则不显示 | 常用响应式滚动 |
| clip | 与 hidden 类似，但不产生滚动条 | CSS 2.1 新增，更轻量 |
方向特定的 overflow 属性
1. overflow-x - 水平方向
.container {
overflow-x: hidden; /* 水平方向隐藏 */
overflow-x: scroll; /* 水平滚动条 */
overflow-x: auto; /* 水平自动 */
}
2. overflow-y - 垂直方向
.container {
overflow-y: hidden; /* 垂直方向隐藏 */
overflow-y: scroll; /* 垂直滚动条 */
overflow-y: auto; /* 垂直自动 */
}
3. 组合使用
.container {
overflow-x: hidden; /* 水平隐藏 */
overflow-y: auto; /* 垂直自动滚动 */
/* 等价于 */
overflow: hidden auto;
}
实用场景与示例
场景 1：模态框内容区域
.modal-content {
max-height: 70vh; /* 最大高度为视口的70% */
overflow-y: auto; /* 内容多时垂直滚动 */
padding: 20px;
}
.modal-body {
/* 内容可能很长 */
line-height: 1.6;
}
场景 2：代码块显示
.code-block {
background: #f4f4f4;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
max-height: 300px;
overflow: auto; /* 代码长时滚动 */
font-family: "Courier New", monospace;
}
/* 添加好看的滚动条 */
.code-block::-webkit-scrollbar {
width: 8px;
}
.code-block::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}