添加一个CSS类“pagebreak”(或“pb”)，如下所示:

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

然后在需要分页符的位置添加一个空DIV标记(或生成方框的任何块元素)。

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

它不会显示在页面上，但在打印时将页面分开。

附注:也许这只适用于使用-after时(也适用于你可能对页面上的其他<div>做什么)，但我发现我必须增加CSS类如下:

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

试试这个链接

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

您可以使用CSS属性page-break-before(或page-break-after)。只需要设置page-break-before:总是在那些块级别的元素(例如，标题，div, p，或表元素)上，这些元素应该以新行开始。

例如，要在任何第2级标题之前和类newpage中的任何元素之前引起换行(例如，<div class=newpage>…)，您可以使用

h2, .newpage { page-break-before: always }

克里斯·道格特说得很有道理。 不过，我在lvsys.com上发现了一个有趣的技巧，它实际上在firefox和chrome上都有效。只需将此注释放在您希望插入换行符的任何位置。您还可以将<p>标记替换为任何块元素。

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

只是想更新一下。分页结束现在是一个遗留属性。

官方页面说明

此属性已被break-after属性取代。

假设你有一个博客，里面有这样的文章:

<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/en-US/docs/Web/CSS/page-break-after;重要提示:这里的This属性已经被break-after属性所取代。但这招对我没用。此外，MDN文档中关于断点后的内容似乎并没有针对换页，所以我更喜欢保持(工作)断点后的页面:always;。

第一页(向下滚动查看第二页) < div风格= "后休息:页面" > < / div > 第二个页面 < br > < br > <button onclick="window.print();return false;"/>打印(查看结果)</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: always”的分页符标记 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”)，在浏览器中，所有三个块依次出现。

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

我添加了

<div style='page-break-before: always;'></div>

在每第三行之后，我的父div有display: flex; 所以我删除了display: flex;而且一切都如我所愿

CSS

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

HTML

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

试试这个(它在Chrome, Firefox和IE中都有效):

... content in page 1 ...
<p style="page-break-after: always;">&nbsp;</p>
<p style="page-break-before: always;">&nbsp;</p>
... content in page 2 ...

我为此挣扎了一段时间，但从未奏效。

最后，解决方案是在头部放置一个样式元素。

page-break-after不能在链接的CSS文件中，它必须在HTML本身中。

下面的代码为我工作，还有一些更多的例子在这里

  <div style="page-break-inside:avoid;page-break-after:always">
  </div>

例如: 下面的代码出现在页面的末尾，你想强制HTML打印在另一个页面上，这样你就可以这样编码

       <table>
            <tbody>
               <tr>
                  <td width="180" valign="top">
                            <p>
                                <strong> </strong>
                            </p>
                            <p>
                                <strong> </strong>
                            </p>
                            <p>
                                <strong> </strong>
                            </p>
                            <p>
                                <strong> </strong>
                            </p>
                            <p align="center">
                                <strong>Approved by Director</strong>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>

主要代码在这里:期望的答案

<div style="page-break-inside:avoid;page-break-after:always"></div>

现在像这样编写第二页/另一页的其余代码

                <table border="1">
                            <tr class="center">
                                <td>
                                    #Main<b>&nbsp;Main</b>
                                </td>
                                <td>
                                    #Project<b>&nbsp;Project</b>
                                </td>
                                <td>
                                    #TypeMainProj<b>&nbsp;Main + Project</b>
                                </td>
                                <td>
                                    #Imprest<b>&nbsp;Imprest</b>
                                </td>
                            </tr>
                        </table>