CSS overflow 是一个简写属性，用于指定如何处理溢出其容器边界的内容。它可用于剪辑内容、添加滚动条或显示省略号。
overflow 属性仅适用于具有指定高度或宽度的块级元素。overflow 属性可用于控制内容在水平和垂直方向上的溢出。
CSS 为 overflow 属性提供了以下可能的值，以处理溢出元素框的内容。
- visible -内容物不会被剪裁，并且会溢出容器。
- hidden -内容被剪裁，溢出不可见。没有滚动条，并且剪裁的内容不可见。
- clip -当内容在其框外进行时，内容将被剪裁。这可以与 overflow-clip-margin 一起使用来设置剪裁区域。
- scroll −滚动条将添加到容器中，以便用户可以滚动以查看溢出的内容。
- auto −仅当内容溢出时，才会将滚动条添加到容器中。
CSS overflow - 具有可见和隐藏的值
以下示例演示如何将 CSS 溢出属性设置为可见或隐藏。默认值为 visible，这允许内容溢出其边界。隐藏的值会隐藏任何溢出的内容。
<html>
<head>
<style>
.container {
display: flex;
}
.overflow-visible {
height: 130px;
width: 250px;
overflow: visible;
border: 2px solid #000000;
background-color: #2fe262;
padding: 5px;
margin-right: 15px;
}
h4 {
text-align: center;
color: #D90F0F;
}
.overflow-hidden {
height: 130px;
width: 250px;
overflow: hidden;
border: 2px solid #000000;
background-color: #2fe262;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="overflow-visible">
<h4>Tutorialspoint CSS Overflow Visible</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
<div class="overflow-hidden">
<h4>Tutorialspoint CSS Overflow Hidden</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
</div>
</body>
</html>
CSS overflow - clip 值
以下示例演示如何通过将 CSS overflow 属性设置为 clip 来隐藏元素的溢出内容。
<html>
<head>
<style>
div {
height: 130px;
width: 250px;
overflow: clip;
border: 2px solid #000000;
background-color: #2fe262;
padding: 5px;
}
h4 {
text-align: center;
color: #D90F0F;
}
</style>
</head>
<body>
<div>
<h4>Tutorialspoint CSS Overflow Clip</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic type setting, remaining essentially unchanged.</p>
</div>
</body>
</html>
CSS 溢出 - 带有滚动和自动值
以下示例确定如何将 CSS 溢出属性设置为 scroll 或 auto。Scroll 始终添加滚动条，而 auto 仅在需要时添加滚动条。
<html>
<head>
<style>
.container {
display: flex;
}
.overflow-scroll {
height: 130px;
width: 250px;
overflow: scroll;
border: 2px solid #000000;
background-color: #2fe262;
padding: 5px;
margin-right: 15px;
}
h4 {
text-align: center;
color: #D90F0F;
}
.overflow-auto {
height: 130px;
width: 250px;
overflow: auto;
border: 2px solid #000000;
background-color: #2fe262;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="overflow-scroll">
<h4>Tutorialspoint CSS Overflow Scroll</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
<div class="overflow-auto">
<h4>Tutorialspoint CSS Overflow Auto</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
</div>
</body>
</html>
CSS 溢出 - 相关属性
以下是 overflow 的 CSS 属性列表：
| 属性 | 描述 |
|---|---|
| overflow-x | 在水平方向上显示溢出的内容。 |
| overflow-y | 在垂直方向上显示溢出的内容。 |
| overflow-anchor | 确定浏览器是否滚动页面以保持元素在视图中。 |
| overflow-block | 确定当元素的宽度太大而无法放入其容器中时，元素的内容如何表现。. |
| overflow-inline | 确定当内容溢出元素的左边缘和右边缘时如何显示内容。 |
| overflow-clip-margin | 确定元素的内容在被剪裁之前可以溢出其框的程度。. |
| overflow-wrap | 确定浏览器是否可以断开不间断字符串中的一行文本。 |
