1. 首页
  2. CSS 菜鸟教程
  3. CSS 分页媒体 - break-after 属性

CSS 分页媒体 - break-after 属性

CSS 分页媒体 break-after 属性指定是否应在元素之后出现分页符。这对于控制打印页面的布局非常有用。

可能的值

以下是可传递给 break-after 分页媒体属性的可能值列表：

泛型中断值

  • auto − 默认值。它会根据可用空间自动在元素之后断开页面。
  • avoid − 如果 nedded，则避免在元素后出现分页符。

分页符值

  • avoid-page − 它阻止元素之后的分页符。
  • page − 此值始终在元素之后插入新页面。
  • left − 强制在元素后使用分页符，以便将下一页格式化为左页。
  • right − 强制在元素后使用分页符，以便将下一页格式化为右页。

列分隔符值

  • avoid-column − 避免在元素之后出现换列。
  • column − 在元素后添加分列符。

适用于

块级元素。

DOM 语法

breakAfter = "auto|avoid|avoid-page|page|left|right|avoid-column|column";

分页符别名

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

page-break-after break-after
auto auto
left left
right right
avoid avoid
always page

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

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

CSS break-after - auto 值

以下示例演示了 break-after： auto 属性在打印页面时自动将节换行到新页面 -

<html>
<head>
<style>
	 	main {
	 	 	 height: 50px;
	 	 	 width: 150px;
	 	}
	 	section {
	 	 	 break-after: auto;	
	 	 	 border: 1px solid black;
	 	 	 padding: 5px;
	 	 	 margin: 10px;
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 5px;
	 	 	 margin: 10px;
	 	}
</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>
	 	 	 <section>
	 	 	 	 	<h3>Column 5</h3>
	 	 	 	 	<p>This is a column 5.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 6</h3>
	 	 	 	 	<p>This is a column 6.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 7</h3>
	 	 	 	 	<p>This is a column 7. This section is break automatically based on the available space and content.</p>
	 	 	 </section>
	 	</main>
<script>
	 	function printPage() {
	 	 	 window.print();
	 	}
</script>
</body>
</html>

CSS break-after - avoid 值

以下示例演示了 break-after： avoid 属性在打印页面时避免在节后分页 -

<html>
<head>
<style>
	 	main {
	 	 	 height: 50px;
	 	 	 width: 180px;
	 	}
	 	section {
	 	 	 break-after: avoid;	
	 	 	 border: 1px solid black;
	 	 	 padding: 5px;
	 	 	 margin: 10px;
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 5px;
	 	 	 margin: 10px;
	 	}
</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>
	 	 	 <section>
	 	 	 	 	<h3>Column 5</h3>
	 	 	 	 	<p>This is a column 5.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 6</h3>
	 	 	 	 	<p>This is a column 6.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 7</h3>
	 	 	 	 	<p>This is a column 7.</p>
	 	 	 </section>

	 	</main>
<script>
	 	function printPage() {
	 	 	 window.print();
	 	}
</script>
</body>
</html>

CSS break-after - 避免页面

以下示例演示了 break-after： avoid-page 属性如何避免打印页面的元素后的分页符：

<html>
<head>
<style>
	 	.avoid-break-page {
	 	 	 break-after: avoid-page;	
	 	}
	 	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-after - 页面值

以下示例演示了 break-after： page 属性将元素中断到打印布局中的新页面 -

<html>
<head>
<style>
	 	.break-page {
	 	 	 break-after: page;	
	 	}
	 	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="break-page"><p>This is a paragraph 2. It will be displayed on first page.</p></div>
	 	<div><p>This is a paragraph 3. After applying the break-after property, this paragraph will be displayed on the second page.</p></div>
	 	<div><p>This is a paragraph 4. It will be displayed on second page.</p></div>
	 	<script>
	 	 	 function printPage() {
	 	 	 	 	window.print();
	 	 	 }
	 	</script>
</body>
</html>

CSS break-after - left 值

以下示例演示了 break-after： left 属性在打印页面时将元素中断到左侧的下一页 -

<html>
<head>
<style>
	 	.page-break-left {
	 	 	 break-after: left;	
	 	}
	 	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><p>This is a paragraph 2. It will be displayed on first page.</p></div>
	 	<div class="page-break-left"><p>This is a paragraph 3. It will be displayed on first page.</p></div>
	 	<div><p>This is a paragraph 4. After applying the break-after: left property, this paragraph will be displayed to the next page on left side when page is printed.</p></div>
	 	<div><p>This is a paragraph 5. It will be displayed on second page.</p></div>
	 	<script>
	 	 	 function printPage() {
	 	 	 	 	window.print();
	 	 	 }
	 	</script>
</body>
</html>

CSS break-after - right 值

以下示例演示了 break-after： right 属性在打印页面时将元素中断到右侧的下一页 -

<html>
<head>
<style>
	 	.page-break-right {
	 	 	 break-after: right;	
	 	}
	 	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><p>This is a paragraph 2. It will be displayed on first page.</p></div>
	 	<div class="page-break-right"><p>This is a paragraph 3. It will be displayed on first page.</p></div>
	 	<div><p>This is a paragraph 4. After applying the break-after: right property, this paragraph will be displayed to the next page on right side when page is printed.</p></div>
	 	<div><p>This is a paragraph 5. It will be displayed on second page.</p></div>
	 	<script>
	 	 	 function printPage() {
	 	 	 	 	window.print();
	 	 	 }
	 	</script>
</body>
</html>

CSS break-after - column 值

以下示例演示了 break-after： column 属性在每个部分后添加一个分栏符，以便在打印页面时创建多列布局 -

<html>
<head>
<style>
	 	main {
	 	 	 column-count: 3;
	 	 	 column-gap: 20px;	
	 	}
	 	section {
	 	 	 break-after: column;	
	 	 	 border: 1px solid black;
	 	 	 padding: 5px;
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 5px;
	 	 	 margin: 10px;
	 	}
</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>CSS break-after: column example.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 2</h3>
	 	 	 	 	<p>CSS break-after: column example.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 3</h3>
	 	 	 	 	<p>CSS break-after: column example.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 4</h3>
	 	 	 	 	<p>CSS break-after: column example.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 5</h3>
	 	 	 	 	<p>CSS break-after: column example.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 6</h3>
	 	 	 	 	<p>CSS break-after: column example.</p>
	 	 	 </section>
	 	</main>
<script>
	 	function printPage() {
	 	 	 window.print();
	 	}
</script>
</body>
</html>

CSS break-after - avoid-column 值

以下示例演示了 break-after： avoid-column 属性可避免在打印页面时在每个节后出现分栏符 -

<html>
<head>
<style>
	 	main {
	 	 	 column-count: 3;
	 	 	 column-gap: 20px;	
	 	}
	 	section {
	 	 	 break-after: avoid-column;	
	 	 	 border: 1px solid black;
	 	 	 padding: 5px;
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 5px;
	 	 	 margin: 10px;
	 	}
</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>CSS break-after: column example.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 2</h3>
	 	 	 	 	<p>CSS break-after: column example.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 3</h3>
	 	 	 	 	<p>CSS break-after: column example.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 4</h3>
	 	 	 	 	<p>CSS break-after: column example.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 5</h3>
	 	 	 	 	<p>CSS break-after: column example.</p>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<h3>Column 6</h3>
	 	 	 	 	<p>CSS break-after: column example.</p>
	 	 	 </section>
	 	</main>
<script>
	 	function printPage() {
	 	 	 window.print();
	 	}
</script>
</body>
</html>
<< CSS 数据类型 - dashed-ident CSS 数据类型 - calc-constant >>