在Chrome中打印，page-break-before会导致一些空格，但不会转到下一页

Question

我试图在打印时在两个元素之间进行分页。我使用了一个空的div元素：

<div>content 1</div>
<div style="page-break-before: always"></div>
<div>content 2</div>

这在边缘和Internet Explorer中非常有效，但在chrome中却不行。通过在之前添加分页符，内容1和2之间会出现一些空格，但内容2仍有一部分保留在第1页中：

如果我删除之前的分页符，它们会重新组合：

如何在Chrome中分页？

Answer 1

您需要有一个非空的div，page-break-before才能正常工作。 请参阅文档here：

  

您不能在空div或绝对定位的元素上使用此属性。

我通常在div内添加哑内容，然后设置opacity: 0。您无法设置display: none，因为page-break仅适用于块元素。