列印換頁 break-after、break-before、break-inside
通常在列印文件時,會根據版面配置適時地將某些段落「分頁」,然而對於網頁來說往往會忽略列印的分頁設置 ( 直接列印網頁機會較少 ),但透過 CSS 的列印換頁相關樣式屬性 break-before、break-after、break-inside,就能精準控制元素在換頁時要位於哪個頁面,這篇教學會介紹這些樣式屬性用法。
快速導覽:
break-before、break-after 位於前頁或後頁
break-before
和 break-after
樣式屬性可以設定元素在「列印時的位置在前頁或後頁」,前一頁的定義是原本的頁面,後頁表示會換頁到下一頁 ( 或下兩頁 ),這兩個樣式沒有繼承特性,主要有下列屬性值 ( 目前屬性值的表現結果都只有自動分頁與強制換頁的效果,未來瀏覽器支援後才可能會有更多列印功能 ):
屬性值 | break-before | break-after |
---|---|---|
auto | 預設值,自動分頁 | 預設值,自動分頁 |
always | 自動分頁 | 自動分頁 |
avoid | 自動分頁 | 自動分頁 |
all | 自動分頁 | 自動分頁 |
page | 換頁到下一頁 | 位於原本頁面,後方元素換頁到下一頁 |
left | 換頁到下一頁 | 位於原本頁面,後方元素換頁到下一頁 |
right | 換頁到下一頁 | 位於原本頁面,後方元素換頁到下一頁 |
下方範例開啟並列印後,可以自行修改樣式屬性與屬性值,就能看到設定這些屬性值的差異 ( 下方範例為 break-after: page;
)。
<!-- 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
樣式屬性可以設定元素在自動分頁時「是否可以跨頁」,如果不能跨頁,就會自動分頁到下一頁 ( 但如果單一元素長度過長在下一頁仍然會自動分成兩頁 ),這個樣式沒有繼承特性,主要有下列屬性值:
屬性值 | 說明 |
---|---|
auto | 預設值,自動分頁。 |
avoid | 避免跨頁,出現跨頁情形會自動到下一頁。 |
avoid-page | 避免跨頁,忽略內容分頁符號 ( 幾乎等同 avoid )。 |
avoid-column | 避免跨頁,忽略內容分欄 ( 幾乎等同 avoid )。 |
avoid-region | 避免跨頁,忽略內容區域中斷 ( 幾乎等同 avoid )。 |
下方範例開啟並列印後,可以自行修改樣式屬性與屬性值,就能看到設定這些屬性值的差異 ( 下方範例為 break-inside: avoid;
)。
<!-- 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
的使用頻率很低,因列印網頁不單純只有跨頁,還有許多眉眉角角的問題需要處理,但如果有列印網頁需求,加入這幾個樣式就讓網頁排版更佳美觀。
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~