如何提高頁面排版效果：合理應用page-break-before屬性

一、什麼是page-break-before屬性

在進行頁面布局時，經常需要進行頁面分頁，當我們希望某個元素在頁面中必須佔據新的一頁時，可以使用page-break-before屬性來控制。該屬性可以設置在一個元素上方插入分頁符，使得在該元素之前的內容都在前一頁，該元素及其之後的內容在新的一頁開始。

page-break-before有以下幾個屬性值：

• auto（默認值）：瀏覽器根據分頁的演算法來計算應該在哪裡插入分頁符。
• always：無論內容多少，總是在元素前插入分頁符。
• avoid：盡量避免在元素前插入分頁符。
• left：在元素前插入分頁符，使得該元素放在左頁。
• right：在元素前插入分頁符，使得該元素放在右頁。
• initial：設置為默認值auto，即自動分頁。
• inherit：從父元素繼承該屬性值。

二、page-break-before應用場景

page-break-before的應用場景很多，下面我們就主要講解以下三個場景：

2.1 列印多頁表格

在列印多頁表格時，如果設置了表格行的高度，當表格高度超過一頁後，會在頁面的任意位置自動發生分頁，導致表格的展示不完整，不美觀。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
      <th>地址</th>
      <th>電話</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>張三</td>
      <td>22</td>
      <td>北京市朝陽區</td>
      <td>00000000001</td>
    </tr>
    // 表格省略
    <tr style="page-break-before: always;">
      <td>張三</td>
      <td>29</td>
      <td>河北省石家莊市辛集市</td>
      <td>00000000010</td>
    </tr>
  </tbody>
</table>

通過給最後一頁的

元素添加page-break-before: always;屬性值，可以保證該表格的展示完整。

2.2 列印分頁處理

在進行分頁列印時，有一些連續的內容在同一份報告上列印是比較糟糕的。應當利用page-break-before屬性嘗試在有邏輯或語義的點處進行分頁，以便讀者獲得最佳的分頁輸出。

// 連續內容展示 

<p>1.列表展示內容1</p>
<p>2.列表展示內容2</p>
<p>3.列表展示內容3</p>

// 區分內容並進行分頁 

<p style="page-break-before: always;">1.列表展示內容1</p>
<p>2.列表展示內容2</p>
<p>3.列表展示內容3</p>

2.3 樣式的控制

在進行頁面布局時，有時需要把某個元素放到新頁的開始，常用於控制樣式。例如，當我們需要實現標題的樣式不能被行在頁面的結尾，即使在最後一個頁面，也要以完整的樣式展示在新頁面的開頭。

.title {
  page-break-before: always;
}

// 使用換行
<div class="title">這是標題內容</div>

三、什麼時候page-break-before屬性會失效

在某些情況下，page-break-before屬性會失效或者不適用，例如：

• 被設置 page-break-after屬性的元素被放在一起；
• 元素設置了 overflow:hidden；
• 元素設置了 position: absolute；
• 元素被包含在一個被設置了 overflow:hidden的元素中；
• 多個元素的高度之和超過了分頁容器的高度。

小結

合理應用page-break-before屬性，可以使頁面布局更加美觀完整。但在使用中需要注意該屬性失效的情況，以及如何解決。在實際開發過程中，需要適時運用該屬性，以達到更好的頁面排版效果。