我可以在HTML打印中强制分页吗？

我正在制作一个HTML报告，该报告将是可打印的，并且其中的“小节”应在新页面中开始。

有什么方法可以在HTML / CSS中放置一些东西，以告知浏览器此时需要强制分页（启动新页面）吗？

我不需要在所有的浏览器中都可以使用它，我想我可以告诉人们使用一组特定的浏览器来打印它。

添加一个名为“ pagebreak”（或“ pb”）的CSS类，如下所示：

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

然后在要分页的位置添加一个空的DIV标记（或任何生成box的块元素）。

<div class="pagebreak"> </div>

它不会显示在页面上，但是在打印时会破坏页面。

PS也许这仅在使用时适用-after（以及<div>页面上其他s 可能要执行的其他操作），但是我发现我不得不按如下方式扩充CSS类：

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

试试这个连结

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

只是想进行更新。page-break-after现在是遗产。

官方页面状态

此属性已由break-after属性代替。

您可以使用CSS属性page-break-before（或page-break-after）。只需设置page-break-before: always这些块级元素（如标题，div，p，或table元素），应该在一个新行开始。

例如，要在任何第二级标题之前和类中任何元素newpage（例如，<div class=newpage>...）之前引起换行，您可以使用

h2, .newpage { 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='page-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)

假设您有一个博客，其中包含以下文章：

<div class="article"> ... </div>

只需将其添加到CSS即可为我工作：

@media print {
  .article { page-break-after: always; }
}

（经过测试并在Chrome 69和Firefox 62上运行）。

参考：

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/page-break-after ; 重要提示：这里说过了，This property has been replaced by the break-after property.但对我来说不起作用break-after。同样，有关MDN的文档break-after似乎并不特定于分页符，因此我更喜欢保留（working）page-break-after: always;。

• 我们可以添加分页标签风格“ ：始终分页符，之后在这里我们要介绍的HTML页面的分页符点”。
  
• “ 分页之前 ”也可以

例：

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 ”一个），其中在浏览器中，所有三个块都依次显示。

当我们在浏览器上使用print命令时，我需要在每第三行之后进行分页。

我添加了<div style ='page-break-before：always;'> </ div>

在每第3行和我的父div显示之后：flex; 所以我删除了display：flex; 它按我的意愿工作。

的CSS

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

的HTML

<div class="pagebreak"></div>

@ Chris Doggett非常有道理。虽然，我在lvsys.com上发现了一个有趣的技巧，但它实际上适用于firefox和chrome。只需将此注释放在要插入分页符的任何位置即可。您也可以<p>用任何块元素替换标签。

<p><!-- pagebreak --></p>