如何提高页面排版效果：合理应用page-break-before属性

一、什么是page-break-before属性

在进行页面布局时，经常需要进行页面分页，当我们希望某个元素在页面中必须占据新的一页时，可以使用page-break-before属性来控制。该属性可以设置在一个元素上方插入分页符，使得在该元素之前的内容都在前一页，该元素及其之后的内容在新的一页开始。

page-break-before有以下几个属性值：

• auto（默认值）：浏览器根据分页的算法来计算应该在哪里插入分页符。
• always：无论内容多少，总是在元素前插入分页符。
• avoid：尽量避免在元素前插入分页符。
• left：在元素前插入分页符，使得该元素放在左页。
• right：在元素前插入分页符，使得该元素放在右页。
• initial：设置为默认值auto，即自动分页。
• inherit：从父元素继承该属性值。

二、page-break-before应用场景

page-break-before的应用场景很多，下面我们就主要讲解以下三个场景：

2.1 打印多页表格

在打印多页表格时，如果设置了表格行的高度，当表格高度超过一页后，会在页面的任意位置自动发生分页，导致表格的展示不完整，不美观。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>地址</th>
      <th>电话</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>22</td>
      <td>北京市朝阳区</td>
      <td>00000000001</td>
    </tr>
    // 表格省略
    <tr style="page-break-before: always;">
      <td>张三</td>
      <td>29</td>
      <td>河北省石家庄市辛集市</td>
      <td>00000000010</td>
    </tr>
  </tbody>
</table>

通过给最后一页的元素添加page-break-before: always;属性值，可以保证该表格的展示完整。

2.2 打印分页处理

在进行分页打印时，有一些连续的内容在同一份报告上打印是比较糟糕的。应当利用page-break-before属性尝试在有逻辑或语义的点处进行分页，以便读者获得最佳的分页输出。

// 连续内容展示 

<p>1.列表展示内容1</p>
<p>2.列表展示内容2</p>
<p>3.列表展示内容3</p>

// 区分内容并进行分页 

<p style="page-break-before: always;">1.列表展示内容1</p>
<p>2.列表展示内容2</p>
<p>3.列表展示内容3</p>

2.3 样式的控制

在进行页面布局时，有时需要把某个元素放到新页的开始，常用于控制样式。例如，当我们需要实现标题的样式不能被行在页面的结尾，即使在最后一个页面，也要以完整的样式展示在新页面的开头。

.title {
  page-break-before: always;
}

// 使用
  
换行
<div class="title">这是标题内容</div>

  

三、什么时候page-break-before属性会失效

在某些情况下，page-break-before属性会失效或者不适用，例如：

• 被设置 page-break-after属性的元素被放在一起；
• 元素设置了 overflow:hidden；
• 元素设置了 position: absolute；
• 元素被包含在一个被设置了 overflow:hidden的元素中；
• 多个元素的高度之和超过了分页容器的高度。

小结

合理应用page-break-before属性，可以使页面布局更加美观完整。但在使用中需要注意该属性失效的情况，以及如何解决。在实际开发过程中，需要适时运用该属性，以达到更好的页面排版效果。