CSS 媒体功能 - overflow-block

CSS 媒体功能 overflow-block 决定了用户设备如何处理在垂直方向上超出初始容器边界的内容。

可能的值

none - 超出块轴的内容不可见。
scroll - 可以通过滚动来查看超出块轴的内容。
optional-paged - 溢出的块轴内容是可滚动的，可以使用手动分页符（例如break-inside）在新页面上显示以下内容。
paged- 内容被划分为单独的页面，并且沿块轴的任何溢出都会延伸到后续页面。

语法


overflow-block: none | scroll | optional-paged | paged;

CSS overflow-block - none 值

以下示例演示了如何使用 CSS 媒体功能 overflow-block： none 属性，当内容溢出时，块轴文本颜色保持黑色并添加滚动条 -


<html>
<head>
<style>
	 	@media (overflow-block: none) {
	 	 	 p {
	 	 	 	 	color: red;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</body>
</html>

CSS overflow-block - scroll 值

以下示例演示了如何使用 CSS 媒体功能 overflow-block： scroll 属性，当内容溢出时，块轴文本颜色变为红色并添加滚动条 -


<html>
<head>
<style>
	 	@media (overflow-block: scroll) {
	 	 	 p {
	 	 	 	 	color: red;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</body>
</html>

CSS overflow-block - optional-paged 值

以下示例演示了 CSS 媒体功能的使用： overflow-block： optional-paged 属性，当内容溢出块轴时，它会添加滚动条并手动触发溢出内容中的分页符 -


<html>
<head>
<style>
	 	.container {
	 	 	 width: 700px;
	 	 	 margin: 0 auto;
	 	 	 padding: 20px;
	 	}
	 	.inner-section {
	 	 	 margin-bottom: 20px;
	 	}
	 	img {
	 	 	 height: 400px;
	 	}
	 	@media (overflow-block: optional-paged) {
	 	 	 .container {
	 	 	 	 	page-break-after: avoid;	
	 	 	 }
	 	 	 .page-break {
	 	 	 	 	page-break-inside: always;	
	 	 	 }
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<p>Click on below button to see the effect when you print the page.</p>
	 	<button onclick="printPage()">Print Page</button>
	 	<article class="container">
	 	 	 <h1>Long Article Title</h1>
	 	 	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	 	 	 <img src="images/red-flower.jpg" alt="red-flower">
	 	 	 <section class="inner-section">
	 	 	 	 	<h2>Section 1</h2>
	 	 	 	 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	 	 	 	 	<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
	 	 	 	 	<div class="page-break"></div>
	 	 	 </section>
	 	<p>More content following the section...</p>
	 	<img src="images/red-flower.jpg" alt="red-flower">
	 	</article>
	 	<script>
	 	 	 function printPage() {
	 	 	 	 	window.print();
	 	 	 }
	 	</script>
</body>
</html>

CSS overflow-block - paged 值

以下示例演示了 CSS 媒体功能 overflow-block： paged 属性的使用，当内容溢出时，块轴以绿色显示在下一页上 -


<html>
<head>
<style>
	 	img {
	 	 	 height: 400px;
	 	}
	 	@media (overflow-block: paged) {
	 	 	 p {
	 	 	 	 	color: green;
	 	 	 }
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<h2>Click on below button to see the effect when you print the page.</p>
	 	<button onclick="printPage()">Print Page</button>
	 	<h2>hello</h2>
	 	<img src="images/red-flower.jpg" alt="red-flower">
	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
	 	<img src="images/red-flower.jpg" alt="red-flower">
	 	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
	 	<script>
	 	 	 function printPage() {
	 	 	 	 	window.print();
	 	 	 }
	 	</script>
</body>
</html>

打印本页