Propriedade CSS break-before

A propriedade CSS break-before controla se uma quebra de página, coluna ou região deve ser inserida antes de um elemento. É a substituição moderna e multi-contexto para a propriedade de impressão page-break-before: a mesma palavra-chave agora funciona para mídia paginada (impressão/PDF), layouts de múltiplas colunas (column-count) e regiões CSS.

Esta página explica o que o break-before faz, quando cada valor é útil, como ele interage com regras de quebra vizinhas e apresenta um exemplo executável.

Por que break-before é importante

Dois problemas de layout muito distintos precisam do mesmo tipo de controle:

Impressão. Quando um documento longo é enviado para uma impressora ou exportado como PDF, o navegador decide onde uma página termina e a próxima começa. break-before: page permite forçar uma nova folha — por exemplo, para que cada <h1> de capítulo comece no topo de uma página nova.
Texto em múltiplas colunas. Em um layout com column-count, o conteúdo flui de uma coluna para a próxima. break-before: column força um cabeçalho ou figura a iniciar uma nova coluna, em vez de ficar isolado na parte inferior da coluna anterior.

A palavra-chave avoid faz o oposto: ela solicita ao navegador que não quebre logo antes do elemento, o que é como manter um cabeçalho colado ao parágrafo que o segue.

Como break-before é calculado

Quando dois elementos adjacentes solicitam uma quebra (um com break-after, o próximo com break-before), o navegador os combina e a quebra mais forte prevalece:

Quebras forçadas (always, page, column, left, right) sempre acontecem.
avoid é apenas uma sugestão — o navegador ainda pode quebrar se não tiver outra opção (por exemplo, um elemento mais alto do que uma única página).
Se nenhum dos lados forçar uma quebra, auto deixa o navegador decidir.

Observe que break-before só tem efeito em elementos que geram uma caixa e estão em um contexto de fragmentação (um documento impresso, um contêiner de múltiplas colunas ou uma região). Em uma página normal de coluna única na tela, ele não tem efeito visível.

Propriedades relacionadas

break-after — o mesmo controle na borda final de um elemento.
break-inside — impede que um elemento (uma linha de tabela, uma figura, um cartão) seja dividido por uma quebra.
columns e column-rule — configuram o layout de múltiplas colunas em que break-before: column opera.

Valor Inicial	auto
Aplica-se a	Elementos de nível de bloco.
Herdado	Não.
Animável	Discreto.
Versão	CSS3
Sintaxe DOM	object.style.breakBefore = "auto";

Sintaxe

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

Exemplo: evitar uma quebra em um layout de múltiplas colunas

No bloco de múltiplas colunas abaixo, o <hr> entre as duas seções define break-before: avoid, pedindo ao navegador que não inicie uma nova coluna antes da linha. Redimensione o resultado para que o texto se distribua em três colunas e veja o efeito:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-before: avoid;
      }
    </style>
  </head>
  <body>
    <h2>Break-before example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo: forçar uma quebra de página ao imprimir

Um requisito comum de impressão é iniciar cada capítulo em sua própria página. Aplique break-before: page ao cabeçalho do capítulo e a regra terá efeito na visualização de impressão (Ctrl/Cmd + P) ou ao exportar para PDF:

.chapter {
  break-before: page;
}

<h1 class="chapter">Chapter 1</h1>
<p>Intro text…</p>

<h1 class="chapter">Chapter 2</h1>
<p>This heading begins on a new printed page.</p>

Como a quebra se aplica apenas à mídia paginada, ela não tem efeito em uma tela de rolagem normal — abra o diálogo de impressão para vê-la.

Valores

Valor	Descrição
auto	Padrão. Permite qualquer quebra antes da caixa principal.
avoid	Evita qualquer quebra antes da caixa principal.
always	Força uma quebra antes da caixa principal.
page	Força uma quebra de página antes da caixa principal.
column	Força uma quebra de coluna antes da caixa principal.
left	Força uma ou duas quebras de página antes da caixa principal para que a próxima página seja formatada como uma página esquerda.
right	Força uma ou duas quebras de página antes da caixa principal para que a próxima página seja formatada como uma página direita.
initial	Define esta propriedade com seu valor padrão.
inherit	Herda esta propriedade do elemento pai.

Prática

O que a propriedade CSS 'break-before' faz?

Ela cria uma quebra antes de um elemento.Ela altera a cor de um elemento.Ela cria uma quebra após um elemento.Ela influencia quebras de página, coluna ou região antes de um elemento ser gerado.Ela modifica a forma de um elemento.