CSS page-break-after 属性

2025年3月26日 | 阅读 4 分钟

此 CSS 属性用于在打印文档时调整元素后的分页。它会在打印时在指定元素后插入一个分页。我们不能在绝对定位的元素 (position: absolute;) 或不生成框的空 <div> 元素上使用此属性。

此 CSS 属性表示是否允许在元素的框之后分页。包括 page-break-after，CSS 属性 page-break-before 和 page-break-inside 有助于我们定义文档打印时的行为。

语法

可能的值

此 CSS 属性值的简要说明如下表所示。

值	描述
auto	这是默认值，如果需要，会在元素后插入一个分页。
总是	它总是强制在指定元素后进行分页。
avoid	它尽可能避免在元素后分页。
左	它强制在指定元素后进行一到两次分页，以便下一页显示为左侧页面。
右	它强制在指定元素后进行一到两次分页，以便下一页显示为右侧页面。
初始	它将属性设置为其默认值。
Inherit	如果指定了此值，则相应元素将使用其父元素的计算值。

让我们通过每个值的示例来理解上述值。

示例 - 使用 auto 值

值 auto 是默认值，它会在需要时自动插入分页。在此示例中，我们使用了两个 <div> 元素和一个按钮。按钮负责打印页面。单击按钮后，我们将看到该值的影响。

<html>
   <head> 
      <style type = "text/css">
         div{
		 font-size: 20px;
		 page-break-after: auto;
		 }
      </style>
   </head>
   <body>
      <div>
	  <h2>Hello World!!</h2>
	  <h2>Welcome to the javaTpoint.com.</h2>
      </div>
      <div>
This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is committed to providing easy and in-depth tutorials on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.      
</div>
      <br>
      <button onclick = "func()">Print this page</button>
      
      <script>
         function func() {
            window.print();
         }
      </script>
      
   </body>
</html>

输出

示例 - 使用 always 值

此值总是强制插入分页，无论是否需要。我们使用一个按钮来打印页面。必须单击该按钮才能看到效果。

<html>
   <head> 
      <style type = "text/css">
         div{
		 font-size: 20px;
		 page-break-after: always;
		 }
      </style>
   </head>
   <body>
      <div>
	  <h2>Hello World!!</h2>
	  <h2>Welcome to the javaTpoint.com.</h2>
      </div>
      <div>
This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is committed to providing easy and in-depth tutorials on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.      
</div>
      <br>
      <button onclick = "func()">Print this page</button>
      
      <script>
         function func() {
            window.print();
         }
      </script>
      
   </body>
</html>

输出

示例 - 使用 left 值

left 值强制插入一到两次分页，以便下一页的格式化为左页。

<html>
   <head> 
      <style type = "text/css">
         div{
		 font-size: 20px;
		 page-break-after: left;
		 }
      </style>
   </head>
   <body>
      <div>
	  <h2>Hello World!!</h2>
	  <h2>Welcome to the javaTpoint.com.</h2>
      </div>
      <div>
This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is committed to providing easy and in-depth tutorials on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.      
</div>
      <br>
      <button onclick = "func()">Print this page</button>
      
      <script>
         function func() {
            window.print();
         }
      </script>
      
   </body>
</html>

输出

示例 - 使用 right 值

right 值强制插入一到两次分页，以便下一页的格式化为右页。

<html>
   <head> 
      <style type = "text/css">
         div{
		 font-size: 20px;
		 page-break-after: right;
		 }
      </style>
   </head>
   <body>
      <div>
	  <h2>Hello World!!</h2>
	  <h2>Welcome to the javaTpoint.com.</h2>
      </div>
      <div>
This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is committed to providing easy and in-depth tutorials on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.      
</div>
      <br>
      <button onclick = "func()">Print this page</button>
      
      <script>
         function func() {
            window.print();
         }
      </script>
      
   </body>
</html>

输出

下一主题CSS content 属性

CSS page-break-after 属性

语法

可能的值

示例 - 使用 auto 值

示例 - 使用 always 值

示例 - 使用 left 值

示例 - 使用 right 值

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS page-break-after 属性

语法

可能的值

示例 - 使用 auto 值

示例 - 使用 always 值

示例 - 使用 left 值

示例 - 使用 right 值

相关帖子

CSS Login

CSS background-blend-mode

CSS Position Relative

CSS White Space

CSS Link

Rounded Border CSS

CSS text-indent

CSS quotes

CSS cubic-bezier

CSS transform-origin

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器