Css 简明教程
CSS - Overflow Property
CSS overflow 是一个简写属性，用于指定如何处理容器边界之外的内容。它可用于裁剪内容、添加滚动条或显示省略号。
overflow 属性仅适用于具有指定高度或宽度的块级元素。溢出属性可用于控制水平和垂直方向中内容的溢出。
CSS 为溢出属性提供了以下可能的值，以处理溢出元素框的内容。
-
visible − 内容未被裁剪，会溢出容器。
-
hidden − 内容被裁剪，并且溢出不可见。没有滚动条，且裁剪的内容不可见。
-
clip − 当超出其框时，内容被裁剪。这可与 overflow-clip-margin 一起使用，以设置裁剪区域。
-
scroll − 向容器中添加了一个滚动条，以便用户可以滚动以查看溢出的内容。
-
auto − 仅当内容溢出时，才向容器中添加滚动条。
CSS overflow - With visible and hidden Values
以下示例显示了如何将 CSS overflow 属性设置为 visible 或 hidden 。默认值为 visible ，此值允许内容溢出其边界。 hidden 值隐藏所有溢出内容。
<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 Value
以下示例显示了如何通过将 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 overflow - With scroll and auto Values
以下示例确定了如何将 CSS overflow 属性设置为 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>