一、了解CSS page-break-before
CSS page-break-before屬性定義在當前元素之前是否添加分頁符，常用於列印排版的網頁中。該屬性值可以是auto（默認值，即瀏覽器根據情況自動添加分頁符）、always（總是添加分頁符）或者avoid（盡量不添加分頁符）。該屬性僅在列印時有效果，在屏幕上無效。
/* 默認值 */
page-break-before: auto;
/* 總是添加分頁符 */
page-break-before: always;
/* 盡量避免添加分頁符 */
page-break-before: avoid;
二、應用CSS page-break-before
常見的應用場景是列印排版，如希望當某些元素跨頁時，盡量不要將其分在兩個頁面，可以使用page-break-before: avoid;。同時在某些情況下，如需要在表格的每個重複標題之前列印表格頭，可以使用page-break-before: always;。
為了更好地展現該屬性的應用效果，我們可以使用以下代碼（對於列印預覽頁面效果更佳）：
.box {
background-color: #eee;
height: 200px;
page-break-before: always;
}
.text {
margin-top: 30px;
height: 200px;
page-break-before: avoid;
}
Box
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/304091.html
微信掃一掃 
支付寶掃一掃 