对于需要分页显示的内容来说，如何控制页面分页十分重要。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/n/243960.html
微信扫一扫 
支付宝扫一扫 