CSS Page Break Before

一、了解CSS page-break-before

CSS page-break-before属性定义在当前元素之前是否添加分页符，常用于打印排版的网页中。该属性值可以是auto（默认值，即浏览器根据情况自动添加分页符）、always（总是添加分页符）或者avoid（尽量不添加分页符）。该属性仅在打印时有效果，在屏幕上无效。

  
    /* 默认值 */
    page-break-before: auto;
    /* 总是添加分页符 */
    page-break-before: always;
    /* 尽量避免添加分页符 */
    page-break-before: avoid;
  

二、应用CSS page-break-before

常见的应用场景是打印排版，如希望当某些元素跨页时，尽量不要将其分在两个页面，可以使用page-break-before: avoid;。同时在某些情况下，如需要在表格的每个重复标题之前打印表格头，可以使用page-break-before: always;。

为了更好地展现该属性的应用效果，我们可以使用以下代码（对于打印预览页面效果更佳）：

  
    
    
   
Box
   
    
   
Text
   
  

运行上述代码，在打印预览中可以看到，“Box”和“Text”之间有一张空白页。这是因为在“Box”元素上设置了page-break-before: always;，所以它会在预览页面的第一页结束后自动跳转到下一页，而由于在“Text”元素上设置了page-break-before: avoid;，所以尽量不会被强制分开。

三、注意事项

虽然该属性可以在打印时实现较好的排版效果，但在页面上使用时需要注意以下几点：

1.注意浏览器兼容性问题，Firefox 65及之前版本对该属性支持不佳，不建议在 Firefox 中使用。

2.不要在行内元素上使用该属性，否则可能会导致分页符在行中出现，影响排版效果。

3.当元素高度不足以填满一个页面时，即使设置了 page-break-before 属性也不会强制结束当前页，因此要注意元素高度的设定。

总之，CSS page-break-before 是一个简单而实用的打印排版属性，在实现复杂的排版效果时可以大显身手，值得前端工程师在实际项目中加以掌握和运用。