CSS page-break-before屬性用法及代碼示例

顧名思義，此 CSS 屬性用於在打印文檔時在元素之前添加分頁符。它在打印文檔期間在指定元素之前插入分頁符。我們不能在絕對定位的元素或不生成框的空 <div> 元素上使用此 CSS 屬性。

此 CSS 屬性表示是否允許在元素的框之前使用分頁符。包括 page-break-before，CSS 屬性 page-break-after 和 page-break-inside 幫助我們定義文檔在打印時的行為。

用法

page-break-before: auto | always | left | right | avoid | initial | inherit;

可能的值

此 CSS 屬性的值的簡要說明如下表所示。

值	描述
auto	如果需要，它是在元素之前插入分頁符的默認值。
always	此值始終強製在指定元素之前進行分頁。
avoid	它用於盡可能避免在元素之前出現分頁符。
left	該值強製在元素之前進行一個或兩個分頁符，以便將下一頁描述為 left-hand 頁。
right	正確的值會在元素之前強製一個或兩個分頁符，以便將下一頁描述為 right-hand 頁。
initial	它將屬性設置為其默認值。
inherit	如果指定了該值，則相應元素使用其父元素 page-break-before 屬性的計算值。

讓我們使用每個示例來理解上述值。

示例 - 使用自動值

值 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 強製插入一兩個分頁符，以便 next-page 的格式將作為左頁。

<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 強製插入一兩個分頁符，以便 next-page 的格式將作為正確的頁麵。

<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-before property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。