列印換頁 break-after、break-before、break-inside

通常在列印文件時，會根據版面配置適時地將某些段落「分頁」，然而對於網頁來說往往會忽略列印的分頁設置 ( 直接列印網頁機會較少 )，但透過 CSS 的列印換頁相關樣式屬性 break-before、break-after、break-inside，就能精準控制元素在換頁時要位於哪個頁面，這篇教學會介紹這些樣式屬性用法。

快速導覽：

• break-before、break-after 位於前頁或後頁
• break-inside 是否跨頁

break-before、break-after 位於前頁或後頁

break-before 和 break-after 樣式屬性可以設定元素在「列印時的位置在前頁或後頁」，前一頁的定義是原本的頁面，後頁表示會換頁到下一頁 ( 或下兩頁 )，這兩個樣式沒有繼承特性，主要有下列屬性值 ( 目前屬性值的表現結果都只有自動分頁與強制換頁的效果，未來瀏覽器支援後才可能會有更多列印功能 )：

下方範例開啟並列印後，可以自行修改樣式屬性與屬性值，就能看到設定這些屬性值的差異 ( 下方範例為 break-after: page; )。

線上展示：https://codepen.io/oxxo/pen/PwYdRKr

<!-- HTML 程式碼 -->
<div>apple</div>
<div>banana</div>
<div class="a">orange</div>
<div>oxxo</div>
<div>papaya</div>
<div>coconut</div>
<div>pear</div>
<div>cucumber</div>

<!-- CSS 程式碼 -->
<style>
  body {
    margin: 0;
    padding: 0;
  }
  div {
    -webkit-print-color-adjust: exact; /* 列印時會出現背景色 */
    color-adjust: exact;               /* 列印時會出現背景色 */
    box-sizing: border-box;
    border: 5px dashed #a00;
    width: 90%;
    height: 140px;
    font-size: 50px;
    margin: 10px;
  }
  .a {
    background: pink;
    break-after: page;
  }
</style>

break-inside 是否跨頁

break-inside 樣式屬性可以設定元素在自動分頁時「是否可以跨頁」，如果不能跨頁，就會自動分頁到下一頁 ( 但如果單一元素長度過長在下一頁仍然會自動分成兩頁 )，這個樣式沒有繼承特性，主要有下列屬性值：

下方範例開啟並列印後，可以自行修改樣式屬性與屬性值，就能看到設定這些屬性值的差異 ( 下方範例為 break-inside: avoid; )。

線上展示：https://codepen.io/oxxo/pen/vEBzRaP

<!-- HTML 程式碼 -->
<div>apple</div>
<div>banana</div>
<div class="a">orange</div>
<div>oxxo</div>
<div>papaya</div>
<div>coconut</div>
<div>pear</div>
<div>cucumber</div>

<!-- CSS 程式碼 -->
<style>
  body {
    margin: 0;
    padding: 0;
  }
  div {
    -webkit-print-color-adjust: exact; /* 列印時會出現背景色 */
    color-adjust: exact;               /* 列印時會出現背景色 */
    box-sizing: border-box;
    border: 5px dashed #a00;
    width: 90%;
    height: 140px;
    font-size: 50px;
    margin: 10px;
  }
  .a {
    background: pink;
    break-inside: avoid;
    height: 1000px;
  }
</style>

小結

CSS 負責控制列印跨頁的 break-before、break-after 和 break-inside 的使用頻率很低，因列印網頁不單純只有跨頁，還有許多眉眉角角的問題需要處理，但如果有列印網頁需求，加入這幾個樣式就讓網頁排版更佳美觀。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～