Search code examples
htmlcsspage-break

Can I usefully add a page break to a web page?


The CSS page-break-after attribute looks like what I want. Is it? This is an intranet application for Firefox users, so browser compatibility is not a large concern.

Here's the background. I have a web application that generates medical forms. Right now the users click on individual forms and print out the result on at a time. They want a single button that will let them print all the necessary forms at once. The HTML forms are templated in such a way that I can concatenate them together, the problem is the page break. I need to put a page break between forms so they paginate properly when printed.

Thank you.


Solution

  • It's hard to do this in a non-hackish way, it seems. However, I did get some good results in Firefox using the following:

    div.page {page-break-inside: avoid; page-break-before: always;}
    

    If I remember correctly, 'page-break-inside' is what would have been ideal, but didn't completely work in FF. 'page-break-before' worked nicely for me. Just make sure you don't apply it to the very first div (or whatever element you use); otherwise, the first page to be printed will be blank.