您的位置:

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