HTML 打印分页符 - CSS

在打印网页时，分页符是一个非常有用的工具。通过添加分页符，我们可以确保在打印过程中文档的布局和格式正确无误。本文将介绍如何使用 CSS 在 HTML 页面上添加分页符。

添加分页符

添加分页符非常简单。我们只需要在 CSS 文件中使用 page-break-before 或 page-break-after 属性即可。

@media print {
  .class-name {
    page-break-before: always;
    page-break-after: always;
  }
}

上面的代码将在打印时在 .class-name 元素前后添加分页符。我们还可以使用以下值：

• always：始终添加分页符。
• auto：只在必要时添加分页符。
• avoid：避免添加分页符。
• left：在左侧添加分页符。
• right：在右侧添加分页符。

我们还可以为多个元素添加分页符。只需要将它们的 class 名称以逗号分隔，放到同一个 CSS 规则中即可。

@media print {
  .class-one, .class-two, .class-three {
    page-break-before: always;
  }
}

隐藏分页符

有时候，我们需要在网页上显示分页符，但又不希望它们在打印时出现。这时该怎么做呢？我们可以使用 display: none 属性将它们隐藏起来。

@media screen {
  .class-name {
    display: block;
  }
}

@media print {
  .class-name {
    display: none;
  }
}

上面的代码将在屏幕上显示 .class-name 元素，但在打印时将其隐藏。

总结

使用 CSS 添加分页符非常简单。我们只需要在 CSS 文件中使用 page-break-before 或 page-break-after 属性即可。我们还可以为多个元素添加分页符，并使用 display: none 属性在打印时隐藏分页符。

希望这篇文章对你有所帮助！