Css 简明教程
CSS - Overflow Property
CSS overflow 是一个简写属性，用于指定如何处理容器边界之外的内容。它可用于裁剪内容、添加滚动条或显示省略号。
CSS overflow is a shorthand property that specifies how to handle content that overflows the boundaries of its container. It can be used to clip the content, add scrollbars, or display an ellipsis.
overflow 属性仅适用于具有指定高度或宽度的块级元素。溢出属性可用于控制水平和垂直方向中内容的溢出。
The overflow property only works for block-level elements with a specified height or width. The overflow property can be used to control the overflow of content in both the horizontal and vertical directions.
CSS 为溢出属性提供了以下可能的值，以处理溢出元素框的内容。
CSS provides following possible values for overflow property to handle content that overflows an element’s box.
-
visible − The content is not clipped and will overflow the container.
-
hidden − The content is clipped and the overflow is not visible. There are no scroll bars, and the clipped content is not visible.
-
clip − The content is clipped when it proceeds outside its box.This can be used with overflow-clip-margin to set the clipped area.
-
scroll − A scrollbar is added to the container so that the user can scroll to see the overflowed content.
-
auto − A scrollbar is added to the container only when the content overflows.
CSS overflow - With visible and hidden Values
以下示例显示了如何将 CSS overflow 属性设置为 visible 或 hidden 。默认值为 visible ，此值允许内容溢出其边界。 hidden 值隐藏所有溢出内容。
Following example shows how to set the CSS overflow property to visible or hidden. The default value is visible, which allows content to overflow its boundaries. The hidden value hides any overflowing content.
<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 来隐藏元素的溢出内容。
The following example shows how to hide overflowing content of an element by setting the CSS overflow property to 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 。始终添加滚动条，而自动仅在需要时添加滚动条。
The following example determines how the CSS overflow property can be set to scroll or auto. Scroll always adds a scrollbar, while auto only adds a scrollbar when needed.
<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>