CSS Page Break Inside

一、css page-break-inside屬性介紹

在網頁排版中，常常需要打印出來或者輸出 PDF 文檔等情況。而頁面分頁的問題也就浮出了水面。當有大量內容需要輸出時，我們需要將它們分頁之後輸出到 PDF 或者打印出來。這時，我們就可能會用到分頁特性的 CSS 屬性——page-break。其中，CSS Page Break Inside 屬性指定元素的內部是否允許分頁。

CSS Page Break Inside 的值只有兩種，一種是避免分頁，即 avoid；另一種是允許分頁，即 auto。此屬性只在分頁後的元素上生效，並且只對塊級元素有效。而被瀏覽器忽略的元素是不受此屬性的影響的。

/*CSS 代碼示例*/
div{
  page-break-inside: avoid;
}

二、css page-break-inside屬性適用範圍

CSS Page Break Inside 屬性的適用範圍非常廣泛，比如在報表、簡歷、合同等需要進行排版的文檔中，為了使輸出效果更加美觀，我們通常會使用頁眉、頁腳等在不同的頁面中呈現不同的內容。此時，我們就可以使用 CSS Page Break Inside 屬性實現。

此外，在將 Web 頁面轉化為 PDF 文件的過程中，分頁也是非常麻煩的事情，而此時 CSS Page Break Inside 屬性也能夠起到很好的作用，控制內容的分頁。

三、css page-break-inside屬性應用場景

1、多行文本排版：多數情況下，使用本屬性防止多行文本最後出現的字符，被分割成兩頁顯示。

/*CSS 代碼示例*/
p{
  page-break-inside : avoid;
}

2、表格分頁：當HTML表格行數非常多時，通常需要將表格分成不同的頁面輸出。這裡我們可以使用 page-break-inside 屬性來避免表格的行被分到兩個頁面。

/*CSS 代碼示例*/
table {
    page-break-inside: avoid;
}
tbody {
    display: block;
    page-break-inside: auto;
}
tr {
    page-break-inside: avoid;
    page-break-after: auto;
}

3、頁面中內容較多：當頁面中有大量內容需要分頁輸出時，我們可以使用 page-break-inside 屬性來控制元素的界限，防止元素被分成兩頁。

/*CSS 代碼示例*/
.content{
    page-break-inside: avoid;
}

四、總結

通過本文對 CSS Page Break Inside 屬性的介紹，相信大家對這一屬性的使用範圍、應用場景以及使用方法等方面都有了一定的了解。在實際項目中，我們可以根據具體需求，採取相應的方法進行設計排版，以達到更好的分頁控制效果。