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

【问题标题】：Printing in Chrome, page-break-before causes some spaces, but doesn't go to next page在 Chrome 中打印，page-break-before 会导致一些空格，但不会转到下一页
【发布时间】：2017-10-24 11:42:51
【问题描述】：

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

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

这在 edge 和 internet explorer 中完美运行，但在 chrome 中不行。通过之前添加分页符，在内容 1 和 2 之间会出现一些空格，但内容 2 仍然有一部分留在页面 1 中：

如果我删除之前的分页符，它们会重新粘在一起：

如何在 chrome 中设置分页符？

【问题讨论】：

你试过break-before，我认为它已经取代了page-break-before：developer.mozilla.org/en-US/docs/Web/CSS/break-before - 虽然不认为它得到很好的支持
感谢您的建议，我尝试过 break-before 但似乎 chrome 无法识别它。当我检查 css 时，它说无效的属性值
不确定还有什么可以尝试的 - 似乎他们正在删除此功能
一个有趣的事情是，如果我使用 * { overflow: initial !important;}，分页符会起作用

标签： html css google-chrome printing

【解决方案1】：

page-break-before 需要有一个非空 div 才能工作。参见文档here：

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

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

【讨论】：