Can I force a page break in HTML printing?

Question

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

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?

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.

Solution 1

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;
    }
}

Solution 2

Try this link

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Solution 3

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)

Solution 4

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.

Solution 5

You can use the CSS property page-break-before (or page-break-after). Just set page-break-before: always on those block-level elements (e.g., heading, div, p, or table elements) that should start on a new line.

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

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

View more solutions

Comments

[FinnNk]

I think this is a better answer as it doesn't involve mangling the HTML to achieve a visual effect.

[Zoe]

But like all good things in CSS, this doesn't always work consistently across the board, so test the living daylights out of it, lest you have angry users wondering why your site prints piles of extra blank pages!

[recursive9]

I actually like the other one better, since it gives me more control. I can always assign the class "pagebreak" only to the H1's that should make the page jump. But it's still a good solution. +1 for @media, although screen should ignore page-break-before, I guess. Thanks!

[jfarrell]

the h1 is an example of what you can use as a tag for the print break. You can substitute and tag name there you like. you could also use page-break-after:always

[nullability]

According to MDN, page-break-after "applies to block elements that generate a box," so using an empty <span> element won't work. It's a better idea to apply it to a piece of your content. See developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

[Chris Doggett]

@nullability: Good catch. I had mainly used this at my old job in a WebBrowser control in WinForms which used IE, the gold standard of following standards.

[Jukka K. Korpela]

h1 is not a good example, since it means a 1st level heading, and a page should normally have just one such heading.

[Peter Burns]

If you want to skip the first header on the first page, try h1:not(:first-child) { page-break-before:always; }

[delphirules]

This did not work for me in Chrome... I'm trying to do a pagebreak inside after a <tr> inside a <table>, will it work in this case ?

[pzmarzly]

For some reason, when using this trick in Chrome, 1 row of pixels of next page was leaking into previous one (noticeable when using background-color). I fixed it by using .pagebreak { min-height: 1px; page-break-before: always; }

[Benjamin]

It should be noted that this property is only supported by Microsoft IE and Edge browsers. caniuse.com/…

[Dinesh Sharma]

I had same issue. I added <div style='page-break-before: always;'></div> after every 3rd row and my parent div have display: flex; so I removed it and it was working as I want

[Doug Mead]

Downvoting because this is a 'legacy property'. See answer below (at the time of this message)

[viking]

page-break-after has been replaced by break-after, refer here :link.

[Dexter Legaspi]

in the <style> head in the html or it should be inline in the element you want the page-break-after applied.

[boardtc]

Worked straight away thanks!!

[Ousama]

@boardtc You're welcome

[Henry Woody]

See CSS Page-Break Not Working in all Browsers for properties that cause issues