CSS 分页媒体 - break-inside 属性_CSS 菜鸟教程

CSS 分页媒体 break-inside 属性用于在内容处于打印页面模式时断开元素内的页面、列或区域。

可能的值

auto − 默认值。它允许根据碎片上下文在元素内部进行中断。
avoid − 避免元素内部的中断，强制内容保持在单个片段中。
avoid-page − 避免元素内部的中断，专门用于分页媒体。
avoid-column − 避免元素内部的中断，专门用于多列布局。
avoid-region − 避免元素内部的中断，特别是 CSS 区域。截至目前，这是实验性的，预计将来会发生变化。

适用于

块级元素。

DOM 语法

breakInside = "auto|avoid|avoid-page|avoid-column|avoid-region";

应用以下规则来确定是否必须进行中断：

作为强制中断值的三个相关值（always、left、right、page、column 或 region）中的任何一个都具有优先权。如果有多个分页符属性，我们将选择序列中最后一个属性。后续是： break-before 优先于 break-after，break-after 优先于 break-inside。
如果三个相关值中的任何一个是避免分页符值（如 avoid、avoid-page、avoid-region 或 avoid-column），则不会在该位置添加分页符。

分页符别名

Web 浏览器将旧版 page-break-inside 属性视为 break-inside 属性的别名。这确保了使用 page-break-inside 的网站顺利运行。break-inside 属性的以下值应相等。

分页符	break-inside
auto	auto
avoid	avoid

CSS break-inside - auto 值

以下示例演示了在打印页面时，break-inside： auto 属性会断开列内的段落 -

<html>
<head>
<style>
	 	ul {
	 	 	 column-width: 150px;
	 	 	 column-gap: 20px;
	 	}
	 	li {
	 	 	 list-style-type: none;
	 	}
	 	p {
	 	 	 break-inside: auto;	
	 	 	 border: 3px solid black;
	 	 	 padding: 5px;
	 	 	 margin: 5px;
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<h3>Click on below button to see the effect when you print the page.</h3>
	 	<button onclick="printPage()">Print Page</button>
	 	<ul>
	 	 	 <li> <p>This is first paragraph.</p></li>
	 	 	 <li><p>This is second paragraph.</p></li>
	 	 	 <li><p>This is third paragraph.</p></li>
	 	 	 <li><p>This is fourth paragraph.</p></li>
	 	 	 <li><p>This is fifth paragraph.</p></li>
	 	 	 </ul>
	 	<script>
	 	 	 function printPage() {
	 	 	 	 	window.print();
	 	 	 }
	 	</script>
</body>
</html>

CSS break-inside - avoid 值

以下示例演示了 break-inside： avoid 属性可避免在打印页面时在段落内分页 -

<html>
<head>
<style>
	 	ul {
	 	 	 column-width: 150px;
	 	 	 column-gap: 20px;
	 	}
	 	li {
	 	 	 list-style-type: none;
	 	}
	 	p {
	 	 	 break-inside: avoid;	
	 	 	 border: 3px solid black;
	 	 	 padding: 5px;
	 	 	 margin: 5px;
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<h3>Click on below button to see the effect when you print the page.</h3>
	 	<button onclick="printPage()">Print Page</button>
	 	<ul>
	 	 	 <li> <p>This is first paragraph.</p></li>
	 	 	 <li><p>This is second paragraph.</p></li>
	 	 	 <li><p>This is third paragraph.</p></li>
	 	 	 <li><p>This is fourth paragraph.</p></li>
	 	 	 <li><p>This is fifth paragraph.</p></li>
	 	 	 </ul>
	 	<script>
	 	 	 function printPage() {
	 	 	 	 	window.print();
	 	 	 }
	 	</script>
</body>
</html>

CSS break-inside - avoid-page 值

下面的示例演示了 break-inside： avoid-page 属性在打印页面时避免了元素内部的分页符 -

<html>
<head>
<style>
	 	div {
	 	 	 break-inside: avoid-page;
	 	 	 border: 1px solid #ccc;
	 	 	 padding: 10px;
	 	 	 margin: 10px;
	 	}
	 	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>

	 	<div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
	 	<div class="avoid-break-page"><p>This is a paragraph 2. It will be displayed on first page.</p></div>
	 	<div><p>This is a paragraph 3. It will be displayed on first page.</p></div>
	 	<div><p>This is a paragraph 4. It will be displayed on first page.</p></div>
	 	<script>
	 	 	 function printPage() {
	 	 	 	 	window.print();
	 	 	 }
	 	</script>
</body>
</html>

CSS break-inside - avoid-column 值

以下示例演示了 break-inside： avoid-column 属性可避免在打印页面时在节内出现分列符 -

<html>
<head>
<style>
	 	main {
	 	 	 column-width: 200px;
	 	 	 column-gap: 10px;
	 	}
	 	section {
	 	 	 width: 200px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin: 10px;
	 	 	 padding: 5px;
	 	 	 break-inside: avoid-column;
	 	}
	 	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>
	 	<main>
	 	 	 <section>
	 	 	 	 	<h3>Column 1</h3>
	 	 	 	 	<p>This is a column 1.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 2</h3>
	 	 	 	 	<p>This is a column 2.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 3</h3>
	 	 	 	 	<p>This is a column 3.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 4</h3>
	 	 	 	 	<p>This is a column 4.</p>
	 	 	 </section>
	 	</main>
	 	<script>
	 	 	 function printPage() {
	 	 	 	 	window.print();
	 	 	 }
	 	</script>
</body>
</html>

<< CSS - 伪元素 - ::marker CSS - @namespace >>