CSS - Overflow 属性_CSS 菜鸟教程

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	确定浏览器是否可以断开不间断字符串中的一行文本。

<< CSS - visibility 属性 CSS - 清除修复（Clearfix ） >>