CSS page-break-after 属性

在进行打印页面排版时，我们可能需要控制每一页的排版方式来获得最好的印刷效果。在这种情况下，CSS 中有一个非常有用的属性：page-break-after。该属性的作用是在当前元素后插入分页符。

语法

page-break-after 属性的语法如下：

page-break-after: auto|always|avoid|left|right|initial|inherit;

属性值解释：

• auto：默认值，根据打印设置自动生成分页符。
• always：始终在元素后插入分页符。
• avoid：尽可能避免在元素后插入分页符。
• left：在元素后插入分页符，并使下一页从左侧开始。
• right：在元素后插入分页符，并使下一页从右侧开始。
• initial：设置属性为默认值。
• inherit：从父元素继承该属性。

实例

下面是一些可以帮助你更好理解 page-break-after 属性的实例：

示例 1: 自动分页

在默认情况下，page-break-after 属性会根据打印设置自动生成分页符。也就是说，只要有必要，它就会自动在元素后添加分页符：

<style>
  .page {
    margin: 20px;
    page-break-after: auto;
  }
</style>

<div class="page">
  这是第一页的内容。
</div>

<div class="page">
  这是第二页的内容。
</div>

示例 2: 避免分页

使用 avoid 属性可以让浏览器尽可能避免在元素后添加分页符：

<style>
  .page {
    margin: 20px;
    page-break-after: avoid;
  }
</style>

<div class="page">
  这是一个非常长的文本块，希望能避免在中间分页。
</div>

注：避免分页并不一定可以完全避免分页，特别是在某些情况下，比如元素本身就很大或者页面设置在窄屏幕上打印时。

示例 3: 指定分页位置

使用 left 和 right 属性可以设置导致分页器在元素后插入分页符，并从左侧或右侧开始分页：

<style>
  .page {
    margin: 20px;
    page-break-after: right;
  }
</style>

<div class="page">
 这将在右边插入分页符，并在下一页的右侧开始新页面。
</div>

示例 4: 强制分页

使用 always 属性可以强制在元素后插入分页符，确保将元素内容放在下一页。

<style>
  .page {
    margin: 20px;
    page-break-after: always;
  }
</style>

<div class="page">
  该元素将在分页符之后结束，并开始新一页。
</div>

总结

page-break-after 属性是 CSS 提供的控制页面分页效果的有力工具。它可以对元素后的打印结果产生非常直接的影响。通过学习 page-break-after 属性，我们可以更好地掌握打印排版技术，提升网站打印体验。