[分享]css3打印设置打两页

CSS3提供了一些方便的打印设置，可以使网页在打印时更加适合，比如打印出来的内容可以保证不会超过一页。下面我们来介绍一下如何使用CSS3实现打印两页的功能。media print { /设置一页内容/...

CSS3提供了一些方便的打印设置，可以使网页在打印时更加适合，比如打印出来的内容可以保证不会超过一页。下面我们来介绍一下如何使用CSS3实现打印两页的功能。

@media print {
  /*设置一页内容*/
  .page {
    height: calc(100vh - 110px);
    overflow: hidden;
  }
  /*设置第二页内容*/
  .page:last-child {
    page-break-after: always;
  }
} 

以上是代码实现，下面进行解释和说明。

首先，我们应该了解CSS中的扩展媒体类型之一：print。当我们在网页中引入这个扩展媒体类型时，我们就可以对打印样式进行设置。

然后我们看这个CSS代码，首先设置了一页的高度为整个显示区域高度减去110px（110px可以理解为页眉页脚等打印出来的内容高度），并且设置了溢出隐藏，这样可以保证内容不会超过一页。

接着就是关键的设置第二页的内容，我们通过:last-child伪类来选择最后一个class为“page”的元素，然后设置page-break-after为always，这个属性的意义是在页面上设置一个分页符，并将内容移到新的一页上。

以上就是CSS3实现打印两页的全部代码和解释，构建出来的页面在打印时会自动分页，确保内容不会出现在两页中间，非常实用。