CSS page-break-before 属性

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

顾名思义，此 CSS 属性在打印文档时用于在元素之前添加分页。它会在打印文档的过程中，在指定的元素之前插入一个分页符。我们不能将此 CSS 属性应用于绝对定位的元素或不生成盒子的空 <div> 元素。

此 CSS 属性表示是否允许在元素的盒模型之前分页。除了 page-break-before，CSS 属性 page-break-after 和 page-break-inside 帮助我们定义文档打印时的行为。

语法

可能的值

此 CSS 属性值的简要描述如下表所示。

值	描述
auto	这是默认值，它会在必要时在元素前插入分页符。
总是	此值始终强制在指定元素前分页。
avoid	在可能的情况下，它用于避免在元素前分页。
左	此值强制在元素前插入一个或两个分页符，以便下一页显示为左侧页面。
右	right 值强制在元素前插入一个或两个分页符，以便下一页显示为右侧页面。
initial	它将属性设置为其默认值。
inherit	如果指定此值，则相应元素将使用其父元素 page-break-before 属性的计算值。

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

示例 - 使用 auto 值

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

<html>
   <head> 
      <style type = "text/css">
         div{
		 font-size: 20px;
		 page-break-before: 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 值

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

在此示例中，分页符应用于 <div> 元素之前，因此按钮不会打印在下一页。如果它应用于元素之后，则 <div> 元素之后会有一个分页符，这会导致按钮打印在下一页。

<html>
   <head> 
      <style type = "text/css">
          div{
		 font-size: 20px;
		 page-break-before: 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-before: 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-before: 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 page-break-inside 属性

CSS page-break-before 属性

语法

可能的值

示例 - 使用 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-before 属性

语法

可能的值

示例 - 使用 auto 值

示例 - 使用 always 值

示例 - 使用 left 值

示例 - 使用 right 值

相关帖子

CSS 中的 Margin 和 Padding

CSS Visibility

CSS content property

CSS White Space

CSS Descendant Selector

CSS Word Wrap

CSS Container

CSS Width

CSS Card Design

Grid Template Columns CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器