Propriedade CSS break-after

A propriedade CSS break-after controla como uma quebra de fragmentação se comporta após uma determinada caixa. Uma quebra de fragmentação é o ponto onde o conteúdo é dividido em dois fragmentos — duas páginas impressas, duas colunas de um layout multicolunas, ou duas regiões CSS. Com break-after você pode forçar uma quebra ("iniciar a próxima seção em uma nova página/coluna") ou impedi-la ("manter este título junto ao texto que o segue").

Ela aceita os seguintes valores: auto, avoid, always, all, page, column, region, avoid-page, avoid-column e avoid-region.

Quando aplicada a um elemento dentro de um contêiner multicol que também está dentro de um contexto paginado, always (e all) força tanto uma quebra de coluna quanto uma quebra de página no mesmo limite.

Quando usar break-after

Use break-after sempre que o fluxo natural do conteúdo se dividir em um ponto inconveniente:

Folhas de estilo para impressão. Inicie cada seção de nível superior em uma nova folha com break-after: page, ou evite que o total de uma fatura fique órfão no topo da próxima página.
Texto em múltiplas colunas. Empurre um subtítulo para o topo da próxima coluna em vez de deixá-lo isolado na parte inferior da coluna atual.
CSS Regions / visualizadores de mídia paginada. Controle onde o conteúdo flui de um contêiner para o próximo.

break-after só tem efeito dentro de um contexto de fragmentação — um documento impresso/paginado, um contêiner column-count/column-width, ou uma cadeia de regiões. Em uma página de rolagem comum não tem efeito visível, por isso o exemplo abaixo utiliza um contêiner multicolunas.

Como as propriedades de quebra são resolvidas

Cada limite de elemento é influenciado por três propriedades:

break-after no elemento anterior.
break-before no elemento atual.
break-inside no elemento pai.

Quando múltiplas propriedades de quebra se aplicam, as seguintes regras de resolução determinam o resultado:

Quebras forçadas (por exemplo, page, column, always) têm prioridade sobre quebras evitadas.
Se múltiplas quebras forçadas se aplicarem, break-before tem precedência sobre break-after, que tem precedência sobre break-inside.
Se qualquer valor aplicável for uma quebra evitada (avoid, avoid-page, avoid-column ou avoid-region), a quebra não será aplicada.

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

Sintaxe

Sintaxe da propriedade CSS break-after

break-after: auto | avoid | always | all | page | column | region | avoid-page | avoid-column | avoid-region | initial | inherit;

Exemplo de break-after com quebra de coluna

Em um contêiner de três colunas, o elemento <hr> recebe break-after: column. Em vez de deixar as colunas se equilibrarem automaticamente, o navegador encerra a coluna atual logo após a linha e continua o restante do conteúdo na próxima coluna — assim, o segundo bloco "Lorem ipsum" sempre começa no topo de uma nova coluna.

<!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-after: column;
      }
    </style>
  </head>
  <body>
    <h2>Break-after property example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo de break-after com quebra de página

Este é o uso mais comum no mundo real: uma folha de estilo para impressão que inicia cada capítulo em sua própria página. Abra a visualização de impressão do navegador (Ctrl/Cmd + P) para ver cada <section> começar em uma nova folha.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      @media print {
        section {
          break-after: page;
        }
      }
    </style>
  </head>
  <body>
    <section>
      <h2>Chapter 1</h2>
      <p>This chapter prints on its own page.</p>
    </section>
    <section>
      <h2>Chapter 2</h2>
      <p>Because the previous section has break-after: page,
         this chapter starts at the top of the next printed page.</p>
    </section>
    <section>
      <h2>Chapter 3</h2>
      <p>And so does this one.</p>
    </section>
  </body>
</html>

Valores

Valor	Descrição
auto	Permite qualquer quebra (página, coluna, região) após a caixa principal.
avoid	Evita qualquer quebra após a caixa principal.
always	Força uma quebra após a caixa principal.
all	Força uma quebra após a caixa principal e todas as caixas delimitadoras do mesmo tipo (por exemplo, todas as colunas ou todas as páginas).
page	Força uma quebra de página após a caixa principal.
column	Força uma quebra de coluna após a caixa principal.
region	Força uma quebra de região após a caixa principal.
avoid-page	Evita uma quebra de página após a caixa principal.
avoid-column	Evita uma quebra de coluna após a caixa principal.
avoid-region	Evita uma quebra de região após a caixa principal.
initial	Define esta propriedade com seu valor padrão.
inherit	Herda esta propriedade do elemento pai.

Propriedades relacionadas

break-before — controla a quebra antes de uma caixa (tem precedência sobre break-after no mesmo limite).
break-inside — impede que uma única caixa seja dividida entre fragmentos.
page-break-after — o alias mais antigo, apenas para impressão, mantido por compatibilidade retroativa.
columns e column-count — configuram o contexto multicolunas dentro do qual as quebras de coluna atuam.

Prática

Quais dos seguintes são valores válidos para a propriedade CSS 'break-after'?