Page-break-after:always的详解

一、page-break-after:always概念解释

page-break-after:always 是一种CSS属性，它可以指定元素在打印页面时总是在页面的底部断页。如果一个元素不适合一页，页面自动分裂成两页或更多，元素将出现在下一页而不是当前页的底部。

在页面的打印版本中，这个属性会在该元素的下方单独的一页中打印出来，并且该属性并不会影响屏幕展示的效果。这个属性在多列页面中也很有用，因为它可以在列之间正确的分割内容。

二、page-break-after:always的使用场景

1、当打印的内容过长超出一页时，使用该属性可以确保内容在页面上显示的顺序正确。

2、当需要将表格分割成多个页面时，可使用该属性实现分页效果。

3、当需要在打印版本中将内容分列，使用该属性可以确保内容在页面间的划分正确。

三、page-break-after:always的注意事项

1、该属性只在分页视图中应用，想要看到效果必须将页面打印出来。

2、如果元素的高度不够，页面不会分裂成两页并生成单独的一页。

3、该属性只会影响下一个元素的位置，所以如果需要实现多页效果，必须在每个需要分页的元素上都应用该属性。

四、page-break-after:always的代码示例

/* CSS代码 */
@media print {
    .page-break {
        page-break-after: always;
    }
}

在需要分页的元素上添加以下类名

  

    //需要分页的内容

  

五、page-break-after:always的浏览器支持情况

该属性在大多数现代浏览器中都有良好的支持。IE9及以上版本也支持该属性。

六、本文总结

在打印页面中，使用page-break-after:always属性可以帮助我们实现多页效果，将长内容自动分割，使每个页面都按照正确的顺序显示内容，同时也更好地控制页面布局的效果。