Thiago Azevedo » CSS http://thiagoazevedo.com Wed, 24 Aug 2011 19:44:51 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Pulo de Folha na Impressão com CSS http://thiagoazevedo.com/2010/07/pulo-de-folha-na-impressao-com-css/ http://thiagoazevedo.com/2010/07/pulo-de-folha-na-impressao-com-css/#comments Thu, 22 Jul 2010 18:13:55 +0000 Thiago Azevedo http://thiagoazevedo.com/?p=39 Read the Rest...
]]> 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.

]]> http://thiagoazevedo.com/2010/07/pulo-de-folha-na-impressao-com-css/feed/ 2