Propriedade CSS break-inside

A propriedade CSS break-inside controla se uma quebra de fragmentação (quebra de página, coluna ou região) pode ocorrer dentro da caixa de um elemento. Use-a para manter um trecho de conteúdo unido, evitando que seja dividido entre duas páginas impressas ou duas colunas em um layout multi-coluna.

Um exemplo prático comum: em um artigo multi-coluna, você não quer que uma figura, um bloco de código ou um título com o primeiro parágrafo seja separado com metade em uma coluna e metade na próxima. Definir break-inside: avoid nesse elemento instrui o navegador a mover a caixa inteira para a próxima coluna ou página em vez de dividi-la.

Esta propriedade se aplica apenas em contextos fragmentados — ou seja, quando o conteúdo realmente flui por fragmentos:

Impressão (@media print), onde o conteúdo é dividido entre páginas.
Layouts multi-coluna, onde o conteúdo flui entre colunas (veja column-count).
Regiões CSS (o valor avoid-region), uma especificação mais antiga com suporte muito limitado.

Quando o conteúdo não está fragmentado (um bloco normal na tela), break-inside não produz efeito visível.

Cada limite de elemento é controlado por três propriedades relacionadas:

Break-after, que se aplica ao elemento anterior.
Break-before, que se aplica ao elemento seguinte.
Break-inside, que se aplica ao elemento contentor.

A especificação de fragmentação CSS trata o comportamento de quebra da seguinte forma:

Quebras forçadas (por exemplo, always, left, right) especificadas por break-before ou break-after têm precedência e ocorrerão.
Se nenhuma quebra forçada for ativada, break-inside determina se o navegador tenta evitar a quebra dentro do elemento. Definí-la como avoid impede quebras de página, coluna ou região dentro da caixa.

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.breakInside = "avoid";

Sintaxe

Sintaxe da Propriedade CSS break-inside

break-inside: auto | avoid | avoid-page | avoid-column | avoid-region | initial | inherit;

Exemplo da propriedade break-inside:

Exemplo da Propriedade CSS break-inside com o valor avoid

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        /* Safari and Chrome */
        -webkit-column-count: 3;
        -webkit-column-rule: 2px dotted #ccc;
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-rule: 2px dotted #ccc;
        /* CSS3 */
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <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

![Propriedade CSS break-inside](https://api.w3docs.com/uploads/media/default/0001/03/e03a2e39ef51e5dd859aa1ab137e06e33638a3ba.png "CSS break-inside Property" =420x)

No exemplo acima, as três colunas contêm cada uma um título e um parágrafo, e o <hr> possui break-inside: avoid para que a linha horizontal nunca seja dividida entre colunas.

Valores

Valor	Descrição
auto	Padrão. Permite quebras normais de página, coluna ou região dentro do elemento.
avoid	Evita qualquer quebra de página, coluna ou região dentro do elemento.
avoid-page	Evita uma quebra de página dentro do elemento.
avoid-column	Evita uma quebra de coluna dentro do elemento.
avoid-region	Evita uma quebra de região dentro do elemento.
initial	Define a propriedade para seu valor padrão (`auto`).
inherit	Herda a propriedade do elemento pai.

Suporte dos navegadores

break-inside com os valores auto e avoid é suportado por todos os navegadores modernos (Chrome, Edge, Firefox, Safari). As palavras-chave avoid-page e avoid-column têm suporte mais irregular, e avoid-region é efetivamente sem suporte porque as Regiões CSS nunca foram amplamente implementadas. Para resultados confiáveis entre navegadores, prefira break-inside: avoid.

Em código relacionado à impressão, você ainda pode encontrar a propriedade mais antiga page-break-inside: avoid;. Ela é o equivalente legado de break-inside: avoid e é mantida para compatibilidade com versões anteriores, por isso é comum declarar as duas:

.keep-together {
  page-break-inside: avoid; /* legacy */
  break-inside: avoid;      /* modern */
}

Prática

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

Permite controlar quebras de página/coluna/região que ocorrem dentro de uma caixaControla o layout de uma página webPermite implementar estilos de fonteÉ usada para evitar que uma quebra de página/coluna/região ocorra dentro de um elementoÉ usada para especificar as margens de um elemento