【发布时间】：2010-12-12 10:50:58
【问题描述】：
我正在制作一个可打印的 HTML 报告，它的“部分”应该从新页面开始。
有什么方法可以在 HTML/CSS 中添加一些内容，向浏览器发出信号，表明它此时需要强制分页（开始一个新页面）？
我不需要在所有浏览器中都使用它，我想我可以告诉人们使用一组特定的浏览器来打印它。
【问题讨论】：
标签： html printing page-break
【发布时间】：2010-12-12 10:50:58
【问题描述】：
添加一个名为“pagebreak”（或“pb”）的 CSS 类，如下所示：
@media print {
.pagebreak { page-break-before: always; } /* page-break-after works, as well */
}
然后在需要分页符的位置添加一个空的 DIV 标记 (or any block element that generates a box)。
<div class="pagebreak"> </div>
它不会显示在页面上，但会在打印时打破页面。
附：也许这只适用于使用-after 时（以及您可能对页面上的其他<div>s 所做的其他事情），但我发现我必须按如下方式扩充CSS 类：
@media print {
.pagebreak {
clear: both;
page-break-after: always;
}
}
【讨论】：
-
但是就像 CSS 中的所有好东西一样，这并不总是能始终如一地工作，所以测试一下它的生活日光，以免你有愤怒的用户想知道为什么你的网站打印成堆的额外空白页！
-
根据 MDN，
page-break-after“适用于生成框的块元素”，因此使用空的<span>元素将不起作用。将其应用于您的一段内容是一个更好的主意。见developer.mozilla.org/en-US/docs/Web/CSS/page-break-after -
@nullability：很好。在我以前的工作中，我主要在 WinForms 中的 WebBrowser 控件中使用它，该控件使用 IE，这是遵循标准的黄金标准。
-
这在 Chrome 中对我不起作用...我正在尝试在
中的
之后在内部进行分页符，在这种情况下会起作用吗？ 由于某种原因，在 Chrome 中使用此技巧时，下一页的 1 行像素泄漏到前一页（使用背景颜色时很明显）。我使用.pagebreak { min-height: 1px; page-break-before: always; }修复了它
试试这个link
<style>
@media print
{
h1 {page-break-before:always}
}
</style>
【讨论】：
-
我认为这是一个更好的答案，因为它不涉及破坏 HTML 以实现视觉效果。
-
我实际上更喜欢另一个，因为它给了我更多的控制权。我总是可以将“分页符”类分配给应该使页面跳转的 H1。但这仍然是一个很好的解决方案。为@media +1，虽然我猜屏幕应该忽略page-break-before。谢谢！
-
h1 是可以用作打印中断标记的示例。您可以在其中替换和标记您喜欢的名称。你也可以使用 page-break-after:always
-
h1不是一个很好的例子，因为它表示一级标题，而一个页面通常应该只有一个这样的标题。 -
如果你想跳过第一页的第一个页眉，试试
h1:not(:first-child) { page-break-before:always; }
First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>只需在需要跳转到下一个页面的位置添加此内容（文本“page 1”将位于第 1 页，文本“page 2”将位于第二页）。
Page 1
<div style='break-after:always'></div>
Page 2
这也有效：
First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)
【讨论】：
-
page-break-after已被break-after取代，参考这里：link。
【讨论】：
-
需要注意的是，这个属性只有微软IE和Edge浏览器支持。 caniuse.com/…
您可以使用 CSS 属性 page-break-before（或 page-break-after）。只需在应该从新行开始的那些块级元素（例如，标题、div、p 或 table 元素）上设置 page-break-before: always。
例如，要在任何 2 级标题之前和 newpage 类中的任何元素（例如，<div class=newpage>...）之前导致换行，您可以使用
h2, .newpage { page-break-before: always }
【讨论】：
试试这个（它在 Chrome、Firefox 和 IE 中工作）：
... content in page 1 ...
<p style="page-break-after: always;"> </p>
<p style="page-break-before: always;"> </p>
... content in page 2 ...
【讨论】：
假设您的博客包含这样的文章：
<div class="article"> ... </div>
只需将其添加到 CSS 中即可：
@media print {
.article { page-break-after: always; }
}
（在 Chrome 69 和 Firefox 62 上测试并运行）。
参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ;重要提示：这里说的是
This property has been replaced by the break-after property.，但break-after对我不起作用。此外，关于break-after的 MDN 文档似乎并不特定于分页符，所以我更喜欢保留（工作）page-break-after: always;。
【讨论】：
CSS
@media print {
.pagebreak {
page-break-before: always;
}
}
HTML
<div class="pagebreak"></div>
【讨论】：
当我们在浏览器上使用打印命令时，我需要在每 3 行后换一个分页符。
我加了
<div style='page-break-before: always;'></div>
在每第三行之后，我的父 div 有 display: flex;
所以我删除了display: flex;，它可以正常工作。
【讨论】：
我为此苦苦挣扎了一段时间，它从来没有奏效。
最后解决的办法是在头部放一个样式元素。
page-break-after 不能在链接的 CSS 文件中，它必须在 HTML 本身中。
【讨论】：
-
在 html 中的
<style>头中，或者它应该内联在要应用page-break-after的元素中。
- 我们可以在要在 html页面。
- “page-break-before”也有效
例子：
HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3
在使用上述代码打印 html 文件时，打印预览将显示三个页面（每个 html 块 "HTML_BLOCK_n" 一个），在浏览器中，所有三个块依次出现另一个。
【讨论】：
First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>【讨论】：
以下代码对我有用，还有更多示例Here
<div style="page-break-inside:avoid;page-break-after:always">
</div>
【讨论】：
@Chris Doggett 非常有意义。
虽然，我在lvsys.com 上发现了一个有趣的技巧，它实际上适用于 Firefox 和 chrome。只需将此评论放在您想要插入分页符的任何位置。您还可以将<p> 标记替换为任何块元素。
<p><!-- pagebreak --></p>
【讨论】：