CSS page-break-inside 属性
CSS page-break-inside 属性
CSS page-break-inside 属性用于控制页面内的分页，指示文档的内部元素是否应该在跨页时被断开。
该属性可应用于任何块级元素，例如段落、表格、列表等等。它主要用于页面自动分页的情况，例如打印或 PDF 导出时。该属性有以下可选值：
auto: 默认值，元素被允许在页内分割。avoid: 元素被强制在一页内显示，即不允许内部分页。inherit: 继承父元素的 page-break-inside 属性。
语法
page-break-inside: auto|avoid|inherit;
属性值
auto: 允许元素在跨页时被断开。avoid: 不允许元素在跨页时被断开。inherit: 继承父元素的 page-break-inside 属性。
实例
以下示例中，每个 div 都包含一段 lorem ipsum 文本。第一个 div 元素使用默认参数 auto；第二个 div 则定义为 avoid，不允许在内容内部分页。
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor nisl non magna vulputate, a vestibulum mauris pretium. Nulla facilisi. Nulla enim sapien, vestibulum hendrerit metus sit amet, posuere facilisis orci. Fusce bibendum elit eu massa vulputate congue. Nam suscipit ultricies leo, at tincidunt lectus luctus et.</p>
<p>Maecenas commodo orci sed ultrices placerat. Duis eget quam magna. Donec mattis leo sapien, a sagittis lacus convallis id. Nam vitae ultrices dui.</p>
</div>
<div style="page-break-inside: avoid;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor nisl non magna vulputate, a vestibulum mauris pretium. Nulla facilisi. Nulla enim sapien, vestibulum hendrerit metus sit amet, posuere facilisis orci. Fusce bibendum elit eu massa vulputate congue. Nam suscipit ultricies leo, at tincidunt lectus luctus et.</p>
<p>Maecenas commodo orci sed ultrices placerat. Duis eget quam magna. Donec mattis leo sapien, a sagittis lacus convallis id. Nam vitae ultrices dui.</p>
</div>
</body>
上述代码在打印或 PDF 导出时，第一个 div 中的内容可能会在页眉、页脚处被中断，而第二个 div 中的内容则被调整为一页内。
注意事项
page-break-inside属性原本属于 CSS2 规范，目前已被 CSS Paged Media Module 所替代。- 该属性在不同的浏览器中可能有不同的行为，不同浏览器的打印预览可能会有不同的效果。