CSS - overflow-x 属性

CSS overflow-x 属性指定元素的内容会溢出其左右边缘，并在水平方向上溢出。

可能的值

visible -允许元素溢出元素的左边缘和右边缘。
hidden -任何水平溢出的内容都将被剪裁并且不会显示。
clip -元素的内容被剪裁，并且不会溢出元素的左右边缘。
scroll −将水平滚动条添加到元素中。
auto −仅当内容溢出其左右边缘时，才会将水平滚动条添加到元素中。

适用于

所有 HTML 元素。

DOM 语法


object.style.overflowX = "visible|hidden|clip|scroll|auto";

CSS overflow-x - 具有隐藏和可见的值

以下示例演示了如何使用带有隐藏 snd 可见值的 overflow-x 属性 -


<html>
<head>
<style>
	 	.container {
	 	 	 display: flex;
	 	}
	 	div.overflow-x-visible {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 60px;
	 	 	 overflow-x: visible;
	 	 	 margin-right: 100px;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
	 	div.overflow-x-hidden {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 60px;
	 	 	 overflow-x: hidden;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="overflow-x-visible">
	 	 	 	 	<h4>Tutorialspoint CSS Overflow-x Visible</h4>
	 	 	 	 	omnis dolor repellendus. non-characteristic words.
	 	 	 </div>
	 	 	 <div class="overflow-x-hidden">
	 	 	 	 	<h4>Tutorialspoint CSS Overflow-x Hidden</h4>
	 	 	 	 	omnis dolor repellendus. non-characteristic words.
	 	 	 </div>
	 	</div>
</body>
</html>

CSS overflow-x - clip 值

当 overflow-x 属性设置为 clip 时，元素的内容将在元素的填充框的左右边缘进行剪裁。


<html>
<head>
<style>
	 	div.overflow-x-clip {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 60px;
	 	 	 overflow-x: clip;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
</style>
</head>
<body>
	 	<div class="overflow-x-clip">
	 	 	 <h4>Tutorialspoint CSS Overflow-x Clip</h4>
	 	 	 omnis dolor repellendus. non-characteristic words, Temporibus.
	 	</div>
</body>
</html>

CSS overflow-x - 带有滚动和自动值

CSS overflow-x 属性可以设置为滚动或自动。当元素的内容超过其宽度时，Scroll 将向元素添加滚动条，而 auto 仅在内容溢出其宽度时添加滚动条。

这是一个例子 -


<html>
<head>
<style>
	 	.container {
	 	 	 display: flex;
	 	}
	 	div.overflow-x-scroll {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 70px;
	 	 	 overflow-x: scroll;
	 	 	 margin-right: 100px;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
	 	div.overflow-x-auto {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 70px;
	 	 	 overflow-x: auto;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="overflow-x-scroll">
	 	 	 	 	<h4>Tutorialspoint CSS Overflow-x Scroll</h4>
	 	 	 	 	omnis dolor repellendus. non-characteristic words.
	 	 	 </div>
	 	 	 <div class="overflow-x-auto">
	 	 	 	 	<h4>Tutorialspoint CSS Overflow-x Auto</h4>
	 	 	 	 	omnis dolor repellendus. non-characteristic words.
	 	 	 </div>
	 	</div>
</body>
</html>

本页