我正在制作一个可打印的 HTML 报告，并且它具有应该在新页面中开始的“部分”。
有什么方法可以在 HTML/CSS 中放入一些东西，向浏览器发出信号，表明它需要在此时强制分页（开始一个新页面）？
我不需要在所有浏览器中都使用它，我想我可以告诉人们使用一组特定的浏览器来打印它。
问问题
278556 次
14 回答
452
添加一个名为“pagebreak”（或“pb”）的 CSS 类，如下所示：
@media print {
.pagebreak { page-break-before: always; } /* page-break-after works, as well */
}
然后在需要分页符的位置添加一个空的 DIV 标记（或任何生成框的块元素）。
<div class="pagebreak"> </div>
它不会显示在页面上，但会在打印时破坏页面。
PS也许这仅适用于使用时-after（以及您可能<div>对页面上的其他 s 进行的其他操作），但我发现我必须按如下方式扩充 CSS 类：
@media print {
.pagebreak {
clear: both;
page-break-after: always;
}
}
于 2009-11-02T22:12:28.020 回答
50
试试这个链接
<style>
@media print
{
h1 {page-break-before:always}
}
</style>
于 2009-11-02T22:14:25.717 回答
24
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>只需将其添加到您需要页面转到下一个页面的位置（文本“第 1 页”将在第 1 页，文本“第 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)
于 2019-10-05T05:00:39.583 回答
17
于 2019-05-02T16:01:42.940 回答
10
您可以使用 CSS 属性page-break-before（或page-break-after）。只需在应该从新行开始的page-break-before: always那些块级元素（例如，标题、、、div或p元素）上设置。table
例如，要在任何 2 级标题之前和类中的任何元素newpage（例如<div class=newpage>...）之前导致换行，您可以使用
h2, .newpage { page-break-before: always }
于 2014-01-21T23:21:44.333 回答
8
试试这个（它在 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 ...
于 2020-12-23T07:21:37.797 回答
1
当我们在浏览器上使用打印命令时，我需要在每 3 行后换一个分页符。
我添加了
<div style='page-break-before: always;'></div>
在每第三行和我的父 div 之后display: flex;
，我删除display: flex;了它，它按我的意愿工作。
于 2020-01-17T14:04:42.913 回答
1
CSS
@media print {
.pagebreak {
page-break-before: always;
}
}
HTML
<div class="pagebreak"></div>
于 2020-01-17T14:18:52.440 回答
1
假设您有一个包含以下文章的博客：
<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。此外，关于分页符的 MDN 文档break-after似乎并不特定，所以我更喜欢保留 (working)page-break-after: always;。
于 2019-09-21T21:15:06.060 回答
1
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>于 2021-10-06T16:32:44.830 回答
1
我为此苦苦挣扎了一段时间，它从来没有奏效。
最后，解决方案是在头部放置一个样式元素。
page-break-after 不能在链接的 CSS 文件中，它必须在 HTML 本身中。
于 2021-01-22T15:50:49.157 回答
0
下面的代码对我有用，还有更多示例Here
<div style="page-break-inside:avoid;page-break-after:always">
</div>
于 2021-11-29T14:49:05.213 回答
0
- 我们可以在要在 html 页面中引入分页符的位置添加一个样式为“ page- break -after:always ”的分页符标记。
- " 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 ”一个），其中与在浏览器中一样，所有三个块一个接一个地依次出现。
于 2019-12-19T11:24:11.470 回答