How do you force to put page breaks in specific sections when you print a web page? The sat truth is that it is not always possible. But if you can guarantee that your visitors will be using a modern browser (read IE 6.0+ or FF 1.5+) you can do the following:
@media print {
.pbreak {
page-break-before: always;
}
}
The page-break-before command will tell the browser to put a page break right before the element of that class. There is also analogous page-break-after command. You can use it like this:
<p>This will appear on page 1</p>
<p class="pbreak">This will appear on page 2</p>
<p class="pbreak">This will appear on page 3</p>
The problem here is that not all browsers support this feature. I successfully tested this on IE 6.0, Firefox 1.5 and Firefox 2.0 and it worked in each case. I don’t think this trick works in IE 5.0 though.
[tags]css, html, printing, page break, web design, ie, firefox[/tags]
Pingback: Paginar la salida por impresora - aNieto2K
Thanks for this! I was looking for a way to split the contents of a page I wanted to print (for an application I’m developing) because it contains large images with corresponding titles that have to be on the same page. This worked perfectly.
Tried it with safari and firefox 2.0 and it works.
Thanks again.
Great! I’m glad it worked for you!
Hey – that’s a great tip – thanks! I’ve just never really caught on to CSS… and I’m a programmer with PHP, old-school HTML, MySQL, C, etc! You do any work on the side? Anyhow, cool blog – I’m subscribed to your feed now so I’ll be checking in regularly!
We have been working on a print version of some sites and ive been telling my programmer this is possible with css. Im so glad this was the second site with the right answer so i did have to spend our looking for the right code. Super cool thx.