我可以在HTML打印中强制换页吗?

小开

最佳答案

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

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

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

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

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

附注:也许这只适用于使用-after时(以及你可能使用页面上的其他__abc1做的其他事情)，但我发现我必须像下面这样扩展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)。只要在那些块级元素(例如，heading， div， p，或table元素)上设置page-break-before: always，这些元素应该在新行开始。

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

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

小开

@克里斯·道根非常有意义。虽然，我在lvsys.com上发现了一个有趣的技巧，它实际上适用于firefox和chrome。只需将此注释放在您希望插入换行符的任何位置。你也可以用任何块元素替换<p>标记

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

小开

只是想更新一下。page-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 property has been replaced by the break-after property.，但它不适用于我的break-after。此外，关于break-after的MDN文档似乎并没有专门用于换页，所以我更喜欢保持(工作)page-break-after: 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"将会在第一页和第二页的文本。将在第二页)。

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:总是"的分页符标记 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;
}
}

超文本标记语言

<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本身中。

小开

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>

小开

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

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

小开

< p > 例如: 下面的代码出现在页面的末尾，你想强制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>