Can I force a page break in HTML printing?
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>
Just add this where you need the page to go to the next one (the text "page 1" will be on page 1 and the text "page 2" will be on the second page).
Page 1
<div style='break-after:always'></div>
Page 2
This works too:
First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)
Just wanted to put an update. page-break-after
is a legacy property now.
Official page states
This property has been replaced by the break-after property.
Add a CSS class called "pagebreak" (or "pb"), like so:
@media print {
.pagebreak { page-break-before: always; } /* page-break-after works, as well */
}
Then add an empty DIV tag (or any block element that generates a box) where you want the page break.
<div class="pagebreak"> </div>
It won't show up on the page, but will break up the page when printing.
P.S. Perhaps this only applies when using -after
(and also what else you might be doing with other <div>
s on the page), but I found that I had to augment the CSS class as follows:
@media print {
.pagebreak {
clear: both;
page-break-after: always;
}
}
Try this link
<style>
@media print
{
h1 {page-break-before:always}
}
</style>