Propriedade CSS page-break-before

A propriedade CSS page-break-before controla se uma quebra de página é forçada, evitada ou deixada automática antes de um determinado elemento quando o documento é impresso ou exibido em qualquer contexto de mídia paginada (impressão, exportação para PDF, pré-visualização de impressão).

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

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

Sintaxe

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

Exemplo: iniciar cada capítulo em uma nova página

Um uso comum é forçar cada título de nível superior a começar em sua própria página impressa. Aplique page-break-before: always a cada h2 para que uma nova página comece antes dele:

@media print {
  h2 {
    page-break-before: always;
  }
}

<h2>Chapter 1</h2>
<p>Content of chapter one...</p>

<h2>Chapter 2</h2>
<p>Content of chapter two...</p>

Ao imprimir, "Chapter 2" começa no topo de uma nova página, mesmo que "Chapter 1" tenha deixado espaço na página atual.

Exemplo: forçar uma página esquerda ou direita

Para documentos impressos em frente e verso (livros, relatórios), você pode controlar em qual lado da abertura o elemento começa. Use left ou right para forçar uma página ímpar ou par antes do elemento:

@media print {
  .chapter-start {
    page-break-before: right; /* start on a right-hand (odd) page */
  }
}

Se o elemento já começaria em uma página direita, o navegador insere uma página em branco para empurrá-lo para a próxima página direita. Este é o mesmo comportamento usado por softwares de diagramação para aberturas de capítulos em livros.

Exemplo: suprimir quebras indesejadas

Use avoid para desencorajar uma quebra imediatamente antes de um elemento. Isso é útil para evitar que um parágrafo introdutório seja separado do título acima dele:

@media print {
  h2 + p {
    page-break-before: avoid;
  }
}

Note que avoid é uma sugestão, não uma garantia. Se não houver outro lugar razoável para quebrar a página, o navegador ainda poderá inserir uma quebra.

Valores

Os valores left e right são destinados à impressão frente e verso, onde você deseja que o conteúdo comece em um lado específico da abertura.

Suporte de navegadores e detalhes importantes

• Todos os principais navegadores suportam auto, always e avoid. O suporte para left e right é menos consistente entre navegadores e renderizadores de PDF.
• A propriedade é ignorada em elementos inline e elementos com posicionamento absoluto ou fixo. Use elementos em nível de bloco como <div>, <section>, <h1>–<h6> ou <p>.
• Definir page-break-before: always em cada elemento de uma lista ou tabela pode produzir muitas páginas curtas. Use-o seletivamente nos limites lógicos das seções.
• page-break-before em um elemento filho é aplicado à caixa em nível de bloco mais próxima que ele gera — não ao contêiner pai.

Dica: combine com as outras propriedades de quebra de página

page-break-before é uma das três propriedades legadas para layout de impressão. Use-as juntas para controle total:

• page-break-after — controla quebras após um elemento.
• page-break-inside — evita que um elemento (uma tabela, figura ou bloco de código) seja dividido entre duas páginas.

Para código moderno, migre para as propriedades de fragmentação equivalentes:

• break-before — substitui page-break-before.
• break-after — substitui page-break-after.
• break-inside — substitui page-break-inside.

Consulte o guia @media print para dicas sobre como criar uma folha de estilos de impressão completa, e as propriedades orphans e widows para controlar quantas linhas de um parágrafo ficam em uma página antes ou depois de uma quebra.

Prática