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.
Related Posts:
RSS Feed
/dev/random
[...] Hoy he estado haciendo unas cosillas con CSS para la impresora y necesitaba página la salida en un determinado lugar. Buscando por Internet (siempre encuentras lo que buscas) he encontrado una propiedad CSS que desconocía. page-break-before: [...]
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!