How can I force a page jump in HTML printing?

If you would like to decide when the page will break and the next one will be started when your web page is printed you can use three CSS2.0 styles to set this “jump”.

  • page-break-before: Sets the element page break behavoir before the element starts.
  • page-break-inside: Lets you set that the page break behavior has to be avoided inside this element.
  • page-break-after: Sets the element page break behavoir after the element ends.

So, you can for example add this style to a table and the table will start in a new page when the page is printed:

    table.details {page-break-before: always;}

Or you can have an style like this and use it as a page-breaker.

    .page-break {page-break-before: always;}
    <div class="page-break"></div>

Finally, you may want some element to be printed in the same page, making it break to a new page in case it doesn’t fit in the current one:

    table td.nobreaks {page-break-inside: avoid;}

Or you may want to avoid that an element that doesnt fits completely in a page provokes a jump, so you use all the possible space:

    h1 {page-break-before: avoid;}

Leave a Reply

Close Bitnami banner
Bitnami