A propriedade break-after do CSS

Definição e uso

A propriedade break-after determina se deve ocorrer quebra de página (page-break), quebra de coluna (column-break) ou quebra de região (region-break) após o elemento especificado.

A propriedade break-after expande a propriedade page-break-after do CSS2.

Ao usar break-after, você pode informar o navegador para quebrar a página, a coluna ou a área após o elemento que possui a propriedade break-after, ou evitar que o elemento seja dividido e ultrapasse duas páginas.

Exemplo

Sempre insira um símbolo de paginação antes do elemento <footer>:

@media print {
  footer {
    break-after: always;
  }
}

Sintaxe CSS

break-after: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Valor da propriedade

Valor Descrição
auto Padrão. Realize automaticamente paginação, divisão de coluna e divisão de região após o elemento.
all Sempre insira um símbolo de paginação imediatamente após a caixa principal.
always Sempre insira um símbolo de paginação após o elemento.
avoid Evite a interrupção de página, coluna e região após o elemento.
avoid-column Evite a divisão de coluna após o elemento.
avoid-page Evite a paginação após o elemento.
avoid-region Evite a divisão após o elemento.
coluna Sempre insira um separador de coluna após o elemento.
esquerda Insira um ou dois símbolos de paginação após o elemento para formatar a próxima página como página esquerda.
página Sempre insira um símbolo de paginação após o elemento.
recto Insira um ou dois símbolos de paginação após a caixa principal para formatar a próxima página como página recto.
região Sempre insira um separador de região após o elemento.
direita Insira um ou dois símbolos de paginação após o elemento para formatar a próxima página como página direita.
verso Insira um ou dois símbolos de paginação após a caixa principal para formatar a próxima página como página verso.
initial Defina essa propriedade como seu valor padrão. Veja: initial.
inherit Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão: auto
Herança: Não
Produção de animação: Não suportado. Veja em:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe JavaScript: object.style.breakAfter="always"

Mais exemplos

Exemplo

Sempre insira um símbolo de paginação após o elemento com id "toc":

@media print {
  #toc {
    break-after: always;
  }
}

Exemplo

Sempre insira um separador de região após o elemento <ul> em alguma área:

.region ul {
    break-after: region;
  }
}

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta plenamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0