Hoje um colega de trabalho veio me perguntar como fazer para que quando a impressão de uma página  chegasse em determinado elemento pulasse para uma próxima folha.

Acredito que algumas pessoas possam ter essa dúvida então vamos ver como podemos fazer isso.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Teste de impressão</title>
  6. </head>
  7. <body>
  8.  
  9. Teste 1
  10. <div style="page-break-before: always"></div>
  11. Teste 2
  12. <div style="page-break-before: always"></div>
  13. Teste 3
  14.  
  15. </body>
  16. </html>

Como podemos ver nas linhas 10 e 12 inserimos uma propriedade dentro da div chamada “page-break-before” com o atributo “always”, com isso faremos que o próximo elemento se mude para uma nova página na hora de imprimir.

Neste exemplo teríamos 3 páginas uma com “Teste 1″ outra com “Teste 2″ e a última com “Teste 3″.

Testado nos navegadores IE6, IE7, IE8, Firefox, Chrome, Opera, Safari.