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

此 CSS 屬性用於在打印文檔時調整元素後的分頁符。它在打印期間在指定元素後插入分頁符。我們不能在絕對定位的元素 (position:absolute;) 或不生成框的空 <div> 元素上使用此屬性。

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

用法

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

可能的值

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

值	描述
auto	如有必要，它是在元素後插入分頁符的默認值。
Always	它總是在指定元素之後強製分頁。
avoid	它用於盡可能避免在元素之後出現分頁符。
left	它在指定元素後強製一個或兩個分頁符，以便將下一頁描述為 left-hand 頁。
right	它在指定元素後強製一個或兩個分頁符，以便將下一頁描述為 right-hand 頁。
Initial	它將屬性設置為其默認值。
Inherit	如果指定了此值，則相應元素將使用其父元素的計算值。

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

示例 - 使用自動值

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

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

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