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 属性的介绍，相信大家对这一属性的使用范围、应用场景以及使用方法等方面都有了一定的了解。在实际项目中，我们可以根据具体需求，采取相应的方法进行设计排版，以达到更好的分页控制效果。