1 简介
在网页布局中，我们经常会遇到内容超出容器的情况，比如文字太长、图片尺寸过大等。CSS 提供了 overflow 属性来控制这些内容在超出容器范围时的显示方式。
overflow 属性用于控制当元素的内容超出其定义的大小（通常是 width 和 height）时，如何处理这些溢出的内容。
语法：
overflow: visible | hidden | scroll | auto;
visible（默认值）：内容不会被裁剪，依然会显示在容器外部。
hidden：隐藏溢出的内容，不会显示滚动条。
scroll：始终显示滚动条（无论是否溢出）。
auto：自动显示滚动条（仅在内容溢出时显示）。
2 overflow 的不同取值
2.1 overflow: visible;（默认）
该值表示溢出部分仍然可见，不会被裁剪，也不会生成滚动条。
示例：
.box {
width: 200px;
height: 100px;
border: 2px solid black;
overflow: visible;
}
<div class="box">
这是一个超出容器宽度的文本，它不会被裁剪，而是直接溢出到容器之外。
</div>
效果：超出的部分仍然可见，不会进行任何裁剪或滚动。
2.2 overflow: hidden;（隐藏超出内容）
该值表示溢出部分将被裁剪，不会显示滚动条。
示例：
.box {
width: 200px;
height: 100px;
border: 2px solid black;
overflow: hidden;
}
<div class="box">
这是一个超出容器宽度的文本，它会被隐藏，无法看到多出的部分。
</div>
效果：溢出部分被直接裁剪，用户无法滚动查看被隐藏的内容。
注意：如果内容被隐藏，用户无法访问超出的部分，除非通过 text-overflow、JavaScript 等方式处理。
2.3 overflow: scroll;（始终显示滚动条）
该值表示无论内容是否溢出，都会强制显示滚动条。
示例：
.box {
width: 200px;
height: 100px;
border: 2px solid black;
overflow: scroll;
}
<div class="box">
这是一个超出容器宽度的文本，它会被裁剪，并且始终会显示滚动条，即使内容没有溢出。
</div>
效果：即使内容未溢出，水平和垂直方向的滚动条也会出现。
注意：overflow: scroll; 会占用额外的空间，即使没有溢出的内容，也会显示滚动条，可能影响美观。
2.4 overflow: auto;（自动显示滚动条）
该值表示当内容溢出时，才会显示滚动条，否则不会显示滚动条。
示例：
.box {
width: 200px;
height: 100px;
border: 2px solid black;
overflow: auto;
}
<div class="box">
这是一个超出容器宽度的文本，只有当内容溢出时才会显示滚动条，否则不会显示。
</div>
效果：当内容超出容器大小时，自动显示滚动条；否则不显示滚动条。
推荐使用 overflow: auto;，因为它可以保持界面的整洁，同时在需要时提供滚动功能。
3 overflow-x 和 overflow-y（单独控制水平/垂直方向）
除了 overflow 这个整体属性，我们还可以单独控制水平溢出（overflow-x）和垂直溢出（overflow-y）。
语法：
overflow-x: visible | hidden | scroll | auto;
overflow-y: visible | hidden | scroll | auto;
示例：
.box {
width: 200px;
height: 100px;
border: 2px solid black;
overflow-x: scroll;
overflow-y: hidden;
}
<div class="box">
这是一个超出容器宽度的文本，但不会垂直滚动，只会横向滚动。
</div>
效果：
overflow-x: scroll; —— 仅在水平方向出现滚动条。
overflow-y: hidden; —— 垂直方向溢出部分被隐藏，不显示滚动条。
overflow-x 适用于防止长文本换行，例如代码块、水平滚动的内容区域等。
4 结合 text-overflow 实现文本溢出省略号 ...
对于文本内容溢出的情况，我们可以使用 text-overflow: ellipsis; 让文本溢出时显示省略号，而不是直接被裁剪。
示例：
.ellipsis {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid gray;
}
<div class="ellipsis">
这是一段很长的文本，超出部分会显示省略号...
</div>
效果：当文本超出容器时，会显示省略号，而不会换行或溢出。
注意：text-overflow: ellipsis; 需要搭配 overflow: hidden; 和 white-space: nowrap; 才能生效。
5 overflow 的高级应用
overflow: hidden + position: absolute 创建滚动遮罩效果
示例
<div class="container">
<div class="content">滚动内容...</div>
</div>
.container {
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
}
.content {
position: absolute;
animation: scroll 5s linear infinite;
}
@keyframes scroll {
from {
top: 0;
}
to {
top: -50px;
}
}
效果：创建一个滚动的内容区域，超出的部分被隐藏。
6 总结
overflow: auto; 是最常见的选择，既能防止内容溢出，又不会始终显示滚动条。
overflow: hidden; 可用于创建剪裁内容的遮罩效果。
text-overflow: ellipsis; 适用于文字溢出省略号处理。
