CSS Google Chrome打印分页符

在本文中，我们将介绍如何使用CSS在Google Chrome中控制打印页面的分页符。

阅读更多：CSS 教程

什么是打印分页符？

在打印网页时，通常需要把内容划分成多页进行打印。分页符用于标记内容在打印时需要换页的地方。通过控制分页符的位置和样式，我们可以更好地控制打印输出的效果。

如何在Google Chrome中设置打印分页符

在CSS中，可以使用@media print规则来设置打印样式。下面是一些常用的CSS属性，可以用来控制打印分页符。

`page-break-before`属性

page-break-before属性用于指定在元素之前添加分页符。

它有以下几个可能的值：
– auto（default）：浏览器自动确定是否需要添加分页符。
– always：在元素之前添加分页符。
– avoid：尽可能在元素之前不添加分页符。
– left：在元素之前添加分页符，并使得新页面起始于新的左页。
– right：在元素之前添加分页符，并使得新页面起始于新的右页。

以下是一个例子：

@media print {
  h1 {
    page-break-before: always;
  }
}

上述代码将在每个<h1>标签之前添加一个分页符。

`page-break-after`属性

page-break-after属性用于指定在元素之后添加分页符，其属性值的含义与page-break-before相同。

以下是一个例子：

@media print {
  p {
    page-break-after: always;
  }
}

上述代码将在每个<p>标签之后添加一个分页符。

`page-break-inside`属性

page-break-inside属性用于指定是否允许在元素内部添加分页符。

它有以下几个可能的值：
– auto（default）：浏览器自动确定是否需要在元素内部添加分页符。
– avoid：不允许在元素内部添加分页符。

以下是一个例子：

@media print {
  .container {
    page-break-inside: avoid;
  }
}

上述代码将不允许在<div class="container">元素内部添加分页符。

其他一些相关的CSS属性

除了上述三个属性之外，还有一些与打印分页相关的CSS属性：

page-break-before：在元素之前添加分页符。
page-break-after：在元素之后添加分页符。
page-break-inside：允许或禁止在元素内部添加分页符。
orphans：指定在页面底部允许剩余的最小行数。（允许部分行在下一页）
widows：指定在页面顶部允许剩余的最小行数。（允许部分行在上一页）

通过调整这些属性的值，我们可以更好地控制打印页面的分页效果。

总结

通过使用CSS的page-break-before、page-break-after和page-break-inside属性，我们可以在Google Chrome中控制打印页面的分页符。这些属性允许我们精确地控制打印输出的分页效果，以适应不同的打印需求。记住，为了获得最佳的打印效果，建议在打印之前先进行打印预览。