CSS page-break-before 属性

在网页排版中，我们常常需要实现将内容分页的效果，而 CSS 提供了 page-break-before 属性来实现这一效果。本文将介绍 page-break-before 属性的用法及注意事项。

语法

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

属性值

• auto：默认值。浏览器自动确定分页位置。
• always：在元素前强制分页。
• avoid：尽可能避免分页。
• left：在元素前分页，并将新页面放在左侧。
• right：在元素前分页，并将新页面放在右侧。
• initial：设置属性的初始值。
• inherit：继承父元素的属性值。

使用示例

实现分页效果

<style>
  .page {
    page-break-before: always;
  }
</style>
<div class="page">第一页</div>
<div class="page">第二页</div>
<div class="page">第三页</div>

将多个 div 元素添加 class="page"，并将 page-break-before 属性设置为 always，即可实现分页效果。

避免 table 在跨页时被分割

<style>
  table {
    page-break-inside: avoid;
  }
</style>

当 table 跨页时，设置 table 元素的 page-break-inside 属性为 avoid，可避免 table 被分割，从而确保表格数据的完整性。

注意事项

• 根据不同浏览器之间的差异，page-break-before 属性的实现效果可能不同。
• 不是所有元素都支持 page-break-before 属性。根据 W3C 标准，只有一些块级元素及部分表格元素支持 page-break-before 属性的使用。

以上介绍了 CSS page-break-before 属性的用法及注意事项，详细的使用方法可以阅读 W3School 的相关文档。