htmlprintingpage-break

Can I force a page break in HTML printing?


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

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