Propriedade break-inside do CSS

Definição e uso

A propriedade break-inside determina se deve ocorrer paginação (page-break), divisão em colunas (column-break) ou divisão de região (region-break) dentro do elemento especificado.

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

Usando break-inside, você pode informar o navegador para evitar que haja interrupção dentro de imagens, fragmentos de código, tabelas e listas.

Exemplo

Evitar paginação dentro do elemento <img>:

@media print {
  img {
    display: block;
    break-inside: avoid;
  }
}

Sintaxe CSS

break-inside: 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. Realizar paginação, divisão em colunas e divisão de região automaticamente dentro do elemento.
avoid Evitar que a página, a coluna ou a região seja interrompida dentro do elemento.
avoid-column Evitar divisão em colunas dentro do elemento.
avoid-page Evitar paginação dentro do elemento.
avoid-region Evitar divisão dentro do elemento.
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:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe JavaScript: object.style.breakInside="always"

Mais exemplos

Evitar paginação dentro dos elementos <table>, <ul> e <ol>:

@media print {
  table, ul, ol {
    break-inside: avoid;
  }
}

suporte do navegador

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

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