對於需要分頁顯示的內容來說，如何控制頁面分頁十分重要。CSS3 中，提供了新的分頁屬性，page-break-* ，其中page-break-inside屬性可以控制一個元素是否被分頁。
一、page-break-inside 簡介
page-break-inside 屬性用於設置分頁規則。如果希望元素不被分頁，可以設置 page-break-inside: avoid。
/*不分頁*/
.no-page-break{
page-break-inside: avoid;
}
如上所示，使用 page-break-inside: avoid即可實現不分頁效果。
二、page-break-inside 的使用場景
page-break-inside 屬性通常用於多列布局中，以及在表格中分頁時。這裡以多列布局來說明其使用場景。
假設要分別設置顯示兩個不同的 div 元素：第一個 div 不允許分頁，第二個 div 允許分頁，代碼如下：
.no-page-break {
page-break-inside: avoid;
}
.page-break {
page-break-inside: auto;
}
HTML代碼：
不允許分頁內容原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/243960.html
微信掃一掃 
支付寶掃一掃 