blocks|key|1417839|text|添加一个名为"pagebreak“(或"pb")的CSS类，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1417840|@media+print+{
++++.pagebreak+{+page-break-before:+always;+}+/*+page-break-after+works,+as+well+*/
}|code-block|syntax|javascript|1417841|然后在想要分页符的地方添加一个空的DIV标记(or+any+block+element+that+generates+a+box)。|offset|length|1417842|<div+class="pagebreak">+</div>|1417843|它不会显示在页面上，但会在打印时拆分页面。|1417844|附注:也许这只适用于使用-after时(也适用于页面上的其他<div>)，但我发现我必须按如下方式扩充CSS类：|style|CODE|1417845|@media+print+{
++++.pagebreak+{
++++++++clear:+both;
++++++++page-break-after:+always;
++++}
}|1417846|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after^0|0|0|N|15|0|0|0|0|C|6|U|5|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@$I|15|J|16|1|17]]|A|$]]|$1|K|3|L|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@$I|1B|J|1C|Q|R]|$I|1D|J|1E|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>Add a CSS class called "pagebreak" (or "pb"), like so:</p>

<pre class="lang-css prettyprint-override"><code>@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}
</code></pre>

<p>Then add an empty DIV tag (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after" rel="noreferrer">or any block element that generates a box</a>) where you want the page break.</p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="pagebreak"&gt; &lt;/div&gt;
</code></pre>

<p>It won't show up on the page, but will break up the page when printing.</p>

<p>P.S. Perhaps this only applies when using <code>-after</code> (and also what else you might be doing with other <code>&lt;div&gt;</code>s on the page), but I found that I had to augment the CSS class as follows:</p>

<pre class="lang-css prettyprint-override"><code>@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}
</code></pre>


blocks|key|1417850|text|尝试此link|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1417851|<style>
@media+print
{
h1+{page-break-before:always}
}
</style>|code-block|syntax|javascript|1417852|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/CSSref/pr_print_pagebb.asp^0|3|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Try this <a href="http://www.w3schools.com/CSSref/pr_print_pagebb.asp" rel="noreferrer">link</a></p>

<pre><code>&lt;style&gt;
@media print
{
h1 {page-break-before:always}
}
&lt;/style&gt;
</code></pre>


blocks|key|1202774|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1202775|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>|code-block|syntax|javascript|1202776|1202777|只需在需要页面转到下一页的地方添加此内容(文本"page+1“将在页面1上，文本"page+2”将在第二页上)。|1202778|Page+1
<div+style='break-after:always'></div>
Page+2|1202779|这也行得通：|1202780|First+page+(there+is+a+break+after+this)
<div+style="break-after:page"></div>
Second+page+(This+will+be+printed+in+the+second+page)|1202781|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|L|3|M|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>First page (scroll down to see the second page)
&lt;div style="break-after:page"&gt;&lt;/div&gt;
Second page
&lt;br&gt;
&lt;br&gt;
&lt;button onclick="window.print();return false;" /&gt;Print (to see the result) &lt;/button&gt;</code></pre>
</div>
</div>
</p>
<p>Just add this where you need the page to go to the next one (the text &quot;page 1&quot; will be on page 1 and the text &quot;page 2&quot; will be on the second page).</p>
<pre><code>Page 1
&lt;div style='break-after:always'&gt;&lt;/div&gt;
Page 2
</code></pre>
<p>This works too:</p>
<pre><code>First page (there is a break after this)
&lt;div style=&quot;break-after:page&quot;&gt;&lt;/div&gt;
Second page (This will be printed in the second page)
</code></pre>


blocks|key|1202684|text|您可以使用CSS属性page-break-before+(或page-break-after)。只需在应该从新行开始的那些块级元素(例如，标题、div、p或table元素)上设置page-break-before:+always即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1202685|例如，要在任何二级标题和类newpage中的任何元素(例如，<div+class=newpage>...)之前进行换行，您可以使用|1202686|h2,+.newpage+{+page-break-before:+always+}|code-block|syntax|javascript|1202687|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before^0|A|H|U|G|20|3|24|1|26|5|2H|P|A|H|0|0|D|7|U|J|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>You can use the CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before" rel="noreferrer"><code>page-break-before</code></a> (or <code>page-break-after</code>). Just set <code>page-break-before: always</code> on those block-level elements (e.g., heading, <code>div</code>, <code>p</code>, or <code>table</code> elements) that should start on a new line.</p>

<p>For example, to cause a line break before any 2nd level heading and before any element in class <code>newpage</code> (e.g., <code>&lt;div class=newpage&gt;</code>...), you would use</p>

<pre><code>h2, .newpage { page-break-before: always }
</code></pre>


blocks|key|1418044|text|试试这个(它在Chrome、Firefox和IE中都有效)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1418045|...+content+in+page+1+...
<p+style="page-break-after:+always;">&nbsp;</p>
<p+style="page-break-before:+always;">&nbsp;</p>
...+content+in+page+2+...|code-block|syntax|javascript|1418046|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this (its work in Chrome, Firefox and IE):</p>
<pre><code>... content in page 1 ...
&lt;p style=&quot;page-break-after: always;&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;page-break-before: always;&quot;&gt;&amp;nbsp;&lt;/p&gt;
... content in page 2 ...
</code></pre>


blocks|key|1417998|text|当我们在浏览器上使用打印命令时，我每隔3行就需要一个分页符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1417999|我添加了|1418000|<div+style='page-break-before:+always;'></div>|code-block|syntax|javascript|1418001|每隔3行和我的父div都有display:+flex;，所以我删除了display:+flex;，它可以像我想要的那样工作。|offset|length|style|CODE|1418002|entityMap^0|0|0|0|D|E|Y|E|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

<p>I needed a page break after every 3rd row while we use print command on browser.</p>
<p>I added</p>
<pre><code>&lt;div style='page-break-before: always;'&gt;&lt;/div&gt;
</code></pre>
<p>after every 3rd row and my parent div have <code>display: flex;</code>
so I removed <code>display: flex;</code> and it was working as I want.</p>


blocks|key|1418012|text|CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1418013|@media+print+{
++.pagebreak+{+
+++++page-break-before:+always;+
++}
}|code-block|syntax|javascript|1418014|HTML|1418015|<div+class="pagebreak"></div>|1418016|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>CSS</p>

<pre><code>@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;div class="pagebreak"&gt;&lt;/div&gt;
</code></pre>


blocks|key|1418090|text|我为此苦苦挣扎了一段时间，但从来没有成功过。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1418091|最后，解决方案是在头部放置一个style元素。|1418092|分页后不能在链接的CSS文件中，它必须在HTML本身中。|1418093|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>I was struggling this for some time, it never worked.</p>
<p>In the end, the solution was to put a style element in the head.</p>
<p>The page-break-after can't be in a linked CSS file, it must be in the HTML itself.</p>


blocks|key|1202909|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1202910|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>|code-block|syntax|javascript|1202911|1202912|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>First page (scroll down to see the second page)
&lt;div style="break-after:page"&gt;&lt;/div&gt;
Second page
&lt;br&gt;
&lt;br&gt;
&lt;button onclick="window.print();return false;" /&gt;Print (to see the result) &lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1202940|text|下面的代码对我有效，还有更多的Here示例|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1202941|++<div+style="page-break-inside:avoid;page-break-after:always">
++</div>|code-block|syntax|javascript|1202942|entityMap|0|LINK|mutability|MUTABLE|url|https://www.codegrepper.com/code-examples/html/html%2Bpage%2Bbreak^0|F|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Below code worked for  me and  there are some more examples <a href="https://www.codegrepper.com/code-examples/html/html+page+break" rel="nofollow noreferrer">Here</a></p>
<pre><code>  &lt;div style=&quot;page-break-inside:avoid;page-break-after:always&quot;&gt;
  &lt;/div&gt;
</code></pre>


blocks|key|1202713|text|@Chris+Doggett非常有意义。不过，我在lvsys.com上发现了一个有趣的技巧，它实际上可以在火狐和chrome上运行。只需将此注释放在您希望插入分页符的任何位置。还可以将<p>标记替换为任何块元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1202714|<p></p>|code-block|syntax|javascript|1202715|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1664049/can-i-force-a-page-jump-in-html-printing/1664058#1664058|1|https://www.lvsys.com/how-to-add-page-breaks-to-html-in-articles^0|2K|3|1|D|0|P|9|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

<p>@<a href="https://stackoverflow.com/questions/1664049/can-i-force-a-page-jump-in-html-printing/1664058#1664058">Chris Doggett</a> makes perfect sense.
Although, I found one funny trick on <a href="https://www.lvsys.com/how-to-add-page-breaks-to-html-in-articles" rel="nofollow noreferrer">lvsys.com</a>, and it actually works on firefox and chrome. Just put this comment anywhere you want the page-break to be inserted. You can also replace the <code>&lt;p&gt;</code> tag with any block element.</p>

<pre><code>&lt;p&gt;&lt;!-- pagebreak --&gt;&lt;/p&gt;
</code></pre>


<p>I'm making a HTML report that is going to be printable, and it has "sections" that should start in a new page.</p>

<p>Is there any way to put something in the HTML/CSS that will signal to the browser that it needs to force a page break (start a new page) at that point?</p>

<p>I don't need this to work in every browser out there, I think I can tell people to use a specific set of browsers in order to print this.</p>


Can I force a page break in HTML printing?

我正在制作一个HTML报告，它将是可打印的，并且它的“部分”应该从一个新页面开始。有没有办法在HTML/CSS中放入一些东西，以通知浏览器在这一点上需要强制分页(开始一个新页面)？我不需要它在每个浏览器上都能工作，我想我可以告诉人们使用一组特定的浏览器来打印它。

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

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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