views:

166

answers:

2

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 jump to 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.

Thanks
Daniel

+4  A: 

Add a CSS class called "pagebreak" (or "pb"), like so:

.pagebreak { page-break-before: always; } // page-break-after works, as well

Then add an empty DIV, SPAN, or P tag where you want the page break.

<span class="pagebreak" />

It won't show up on the page, but will break up the page when printing.

Chris Doggett
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!
Zoe
+4  A: 

Try this link

<style>
@media print
{
h1 {page-break-before:always}
}
</style>
Bob.T.Terminal
I think this is a better answer as it doesn't involve mangling the HTML to achieve a visual effect.
FinnNk
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!
Daniel Magliola
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
Bob.T.Terminal