CSS - overflow-block 属性_CSS 菜鸟教程

CSS overflow-block 属性决定了当元素的内容超过其框的左右边界时的行为方式。

overflow-block 属性仅在 Firefox 浏览器上受支持。

可能的值

visible-允许内容溢出元素的框。
hidden -溢出内容是隐藏的。
clip -clip overflow 值用于剪裁溢出的内容并使其不可见。
scroll −通过添加滚动条，可以使元素可滚动。
auto −滚动条将添加到元素中，以便用户可以查看其溢出内容。

适用于

所有 HTML 元素。

DOM 语法

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

属性 overflow-block 仅在 Firefox 浏览器上受支持。因此，所有示例仅适用于Firefox浏览器。

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

overflow-block 属性控制元素的内容是否可以溢出其边界。可见值允许内容溢出，而隐藏值则隐藏任何溢出的内容。

<html>
<head>
<style>
	 	.container {
	 	 	 display:flex;
	 	}
	 	div.overflow-block-visible {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 170px;
	 	 	 height: 160px;
	 	 	 overflow-block: visible;
	 	 	 margin-right: 100px;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
	 	div.overflow-block-hidden {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 170px;
	 	 	 height: 160px;
	 	 	 overflow-block: hidden;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="overflow-block-visible">
	 	 	 	 	<h4>Tutorialspoint CSS Overflow-block Visible</h4>
	 	 	 	 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
	 	 	 </div>
	 	 	 <div class="overflow-block-hidden">
	 	 	 	 	<h4>Tutorialspoint CSS Overflow-block Hidden</h4>
	 	 	 	 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
	 	 	 </div>
	 	</div>
</body>
</html>

CSS overflow-block - clip 值

overflow-block： clip 属性隐藏元素的任何溢出内容。不会添加任何滚动条。

<html>
<head>
<style>
	 	div.overflow-block-clip {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 170px;
	 	 	 height: 160px;
	 	 	 overflow-block: clip;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
</style>
</head>
<body>
	 	<div class="overflow-block-clip">
	 	 	 <h4<Tutorialspoint CSS Overflow-block Clip</h4>
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
	 	</div>
</body>
</html>

CSS overflow-block - 具有滚动和自动值

当 overflow-block 属性设置为 scroll 和 auto 时。滚动条始终添加滚动条，而自动仅在需要时添加滚动条。

<html>
<head>
<style>
	 	.container {
	 	 	 display:flex;
	 	}
	 	div.overflow-block-scroll {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 170px;
	 	 	 height: 160px;
	 	 	 overflow-block: scroll;
	 	 	 margin-right: 100px;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
	 	div.overflow-block-auto {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 170px;
	 	 	 height: 160px;
	 	 	 overflow-block: auto;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="overflow-block-scroll">
	 	 	 	 	<h4>Tutorialspoint CSS Overflow-block Scroll</h4>
	 	 	 	 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
	 	 	 </div>
	 	 	 <div class="overflow-block-auto">
	 	 	 	 	<h4>Tutorialspoint CSS Overflow-block Auto</h4>
	 	 	 	 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
	 	 	 </div>
	 	</div>
</body>
</html>

<< CSS - overflow-y 属性 CSS - overflow-inline 属性 >>