Propiedad CSS break-inside

La propiedad CSS break-inside controla si se permite que un salto de fragmentación (salto de página, columna o región) caiga dentro del cuadro de un elemento. Úsala para mantener un fragmento de contenido unido y que no se divida entre dos páginas impresas o dos columnas de un diseño multicolumna.

Un ejemplo práctico y habitual: en un artículo multicolumna no querrás que una figura, un bloque de código o un encabezado con su primer párrafo queden partidos con la mitad en una columna y la otra mitad en la siguiente. Establecer break-inside: avoid en ese elemento le indica al navegador que empuje todo el cuadro a la siguiente columna o página en lugar de dividirlo.

Esta propiedad se aplica únicamente en contextos fragmentados, es decir, cuando el contenido fluye a través de fragmentos:

Impresión (@media print), donde el contenido se divide en páginas.
Diseños multicolumna, donde el contenido fluye a través de columnas (véase column-count).
Regiones CSS (el valor avoid-region), una especificación más antigua con soporte muy limitado.

Cuando el contenido no está fragmentado (un bloque normal en pantalla), break-inside no tiene ningún efecto visible.

Cada límite de elemento se controla mediante tres propiedades relacionadas:

Break-after, que se aplica al elemento precedente.
Break-before, que se aplica al elemento siguiente.
Break-inside, que se aplica al elemento contenedor.

La especificación de fragmentación CSS gestiona el comportamiento de saltos de la siguiente manera:

Los saltos forzados (p. ej., always, left, right) especificados por break-before o break-after tienen precedencia y ocurrirán.
Si no se activa ningún salto forzado, break-inside determina si el navegador intenta evitar el salto dentro del elemento. Establecerlo en avoid impide los saltos de página, columna o región dentro del cuadro.

Valor inicial	auto
Se aplica a	elementos de nivel de bloque.
Heredable	No.
Animatable	Discreto.
Versión	CSS3
Sintaxis DOM	object.style.breakInside = "avoid";

Sintaxis

Sintaxis de la propiedad CSS break-inside

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

Ejemplo de la propiedad break-inside:

Ejemplo de la propiedad CSS break-inside con el 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>

Pruébalo tú mismo »

Resultado

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

En el ejemplo anterior, las tres columnas contienen cada una un encabezado y un párrafo, y el elemento <hr> lleva break-inside: avoid para que la línea nunca se divida entre columnas.

Valores

Valor	Descripción
auto	Predeterminado. Permite saltos normales de página, columna o región dentro del elemento.
avoid	Evita cualquier salto de página, columna o región dentro del elemento.
avoid-page	Evita un salto de página dentro del elemento.
avoid-column	Evita un salto de columna dentro del elemento.
avoid-region	Evita un salto de región dentro del elemento.
initial	Establece la propiedad en su valor predeterminado (`auto`).
inherit	Hereda la propiedad del elemento padre.

Compatibilidad con navegadores

break-inside con los valores auto y avoid es compatible con todos los navegadores modernos (Chrome, Edge, Firefox, Safari). Las palabras clave avoid-page y avoid-column tienen un soporte más irregular, y avoid-region es prácticamente incompatible porque las Regiones CSS nunca se implementaron de forma generalizada. Para obtener resultados fiables en todos los navegadores, se prefiere break-inside: avoid.

En código relacionado con la impresión, es posible que aún veas la propiedad antigua page-break-inside: avoid;. Es el equivalente heredado de break-inside: avoid y se mantiene por compatibilidad con versiones anteriores, por lo que es habitual declarar ambas:

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

Práctica

¿Qué hace la propiedad CSS 'break-inside'?

Permite controlar los saltos de página/columna/región que caen dentro de un cuadroControla el diseño de una página webPermite aplicar estilos de fuenteSe usa para evitar que ocurra un salto de página/columna/región dentro de un elementoSe usa para especificar los márgenes de un elemento