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

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

如果我們想避免圖像、項目列表、代碼片段、表格中的分頁符，那麽我們可以使用 page-break-inside 屬性。

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

用法

page-break-inside: auto | avoid | initial | inherit;

可能的值

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

值	描述
auto	如有必要，它是在元素內插入分頁符的默認值。
avoid	它用於盡可能避免元素內的分頁符。
initial	它將屬性設置為其默認值。
inherit	如果指定了該值，則相應元素使用其父元素 page-break-inside 屬性的計算值。

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

示例 - 使用自動值

值 auto 是在需要時自動插入分頁符的默認值。該值既不會阻止也不會強製元素框內的分頁符。

在這個例子中，我們使用了兩個 <div> 元素和一個按鈕。該按鈕負責打印頁麵。單擊按鈕後，我們將看到該值的效果。

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

輸出

示例 - 使用避免值

如果可能，此值可避免元素框內的分頁符。在這裏，我們使用一個按鈕來打印頁麵。我們必須單擊該按鈕才能看到效果。

<html>
   <head> 
      <style type = "text/css">
          div{
		 font-size:20px;
		 page-break-inside:avoid;
		 }
      </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 property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。