Propriedade CSS page-break-after

A propriedade CSS page-break-after controla se uma quebra de página é forçada ou evitada após um determinado elemento quando o documento é impresso ou exibido em qualquer contexto de mídia paginada (impressão, exportação para PDF, visualização de impressão). Uma quebra de página encerra a página atual e empurra o conteúdo seguinte para uma nova página.

Em uma tela normal, o conteúdo web flui em uma rolagem contínua, portanto não há nada para quebrar. Mas quando essa mesma página é enviada para uma impressora ou salva como PDF, o navegador precisa decidir onde uma folha de papel termina e a próxima começa. page-break-after permite influenciar essas decisões — por exemplo, para iniciar cada novo capítulo no topo de uma página em branco, ou para evitar que um cabeçalho fique isolado no final de uma página.

A propriedade não tem efeito visível na tela; normalmente é colocada dentro de um bloco @media print para que as regras sejam aplicadas somente quando o documento for impresso. Ela não se aplica a elementos com posicionamento absoluto.

Aviso

page-break-after está obsoleta. Foi substituída pela propriedade mais capaz break-after, que também funciona com layouts de múltiplas colunas e regiões. Para código novo, prefira break-after. Os navegadores tratam page-break-after como um alias de break-after, portanto os sites existentes continuam funcionando.

Valor Inicial	auto
Aplica-se a	Elementos de nível de bloco.
Herdada	Não.
Animável	Não.
Versão	CSS2
Sintaxe DOM	object.style.pageBreakAfter = "avoid";

Sintaxe

page-break-after: auto | avoid | always | left | right | initial | inherit;

Exemplo: iniciar cada seção em uma nova página

Um uso comum é forçar cada seção de nível superior a começar em sua própria página impressa. Aplique page-break-after: always a cada seção para que uma quebra seja inserida após ela:

@media print {
  .chapter {
    page-break-after: always;
  }
}

<div class="chapter">
  <h2>Chapter 1</h2>
  <p>...content...</p>
</div>
<div class="chapter">
  <h2>Chapter 2</h2>
  <p>...content...</p>
</div>

Quando impresso, o Capítulo 2 agora começa no topo da página 2.

Exemplo: evitar que um elemento quebre após ele

Use avoid para desincentivar uma quebra logo após um elemento — por exemplo, para impedir que um cabeçalho fique sozinho no final de uma página, separado do texto que o segue:

@media print {
  h2 {
    page-break-after: avoid;
  }
}

Dica: combine com page-break-before e page-break-inside

page-break-after é uma das três propriedades relacionadas. Use-as juntas para ter controle total sobre layouts impressos:

page-break-before — controla quebras antes de um elemento.
page-break-inside — impede que um elemento (uma tabela ou figura) seja dividido entre duas páginas.

Valores

Valor	Descrição
auto	Padrão. Permite que o navegador decida se deve inserir uma quebra de página após o elemento.
avoid	Evita inserir uma quebra de página após o elemento quando possível.
always	Sempre força uma quebra de página após o elemento.
left	Força uma quebra de página após o elemento para que a próxima página seja formatada como uma página do lado esquerdo.
right	Força uma quebra de página após o elemento para que a próxima página seja formatada como uma página do lado direito.
initial	Define esta propriedade com seu valor padrão (`auto`).
inherit	Herda esta propriedade do elemento pai.

Os valores left e right são principalmente úteis para impressão frente e verso, onde você deseja que uma seção comece em um lado específico da página.

Nota: Para desenvolvimento web moderno, use a propriedade break-after em vez disso, pois page-break-after está obsoleta.

Prática

O que a propriedade 'page-break-after' faz no CSS?

Aplica uma quebra de página após um elemento de nível de bloco.Altera a cor de um elemento de nível de bloco.Determina a margem de um elemento.É usada em mídia paginada para controlar onde ocorrem as quebras de página.Manipula o alinhamento de texto dentro de um elemento de nível de bloco.