我正在制作一个HTML报告,将是可打印的,它有“部分”,应该在一个新的页面开始。
有没有办法在HTML/CSS中放入一些东西,将向浏览器发出信号,它需要在此时强制换页(开始一个新页面)?
我不需要它在每个浏览器中都能运行,我想我可以告诉人们使用特定的浏览器来打印它。
我正在制作一个HTML报告,将是可打印的,它有“部分”,应该在一个新的页面开始。
有没有办法在HTML/CSS中放入一些东西,将向浏览器发出信号,它需要在此时强制换页(开始一个新页面)?
我不需要它在每个浏览器中都能运行,我想我可以告诉人们使用特定的浏览器来打印它。
当前回答
只是想更新一下。分页结束现在是一个遗留属性。
官方页面说明
此属性已被break-after属性取代。
其他回答
克里斯·道格特说得很有道理。 不过,我在lvsys.com上发现了一个有趣的技巧,它实际上在firefox和chrome上都有效。只需将此注释放在您希望插入换行符的任何位置。您还可以将<p>标记替换为任何块元素。
<p><!-- pagebreak --></p>
试试这个(它在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 ...
添加一个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>
假设你有一个博客,里面有这样的文章:
<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;。