Propiedad CSS break-inside

La propiedad CSS break-inside define cómo deben comportarse los saltos de página, columna o región dentro del cuadro generado. Se ignora cuando no se especifica el cuadro generado. Los valores válidos incluyen auto, avoid, avoid-page, avoid-column y avoid-region.

El límite de cada elemento está controlado por tres propiedades:

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 de CSS maneja el comportamiento de los saltos de la siguiente manera:

Los saltos forzados (p. ej., always, left, right) especificados por break-before o break-after tienen prioridad y se producirán.
Si no se activa ningún salto forzado, break-inside determina si el navegador intenta evitar romper el contenido 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.
Heredado	No.
Animable	Discreto.
Versión	CSS3
Sintaxis DOM	object.style.breakInside = "avoid";

Sintaxis

Sintaxis de la propiedad CSS break-inside

css

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

html

<!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>

Try it Yourself »

Resultado

Propiedad CSS break-inside

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 principal.

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 la disposición de una página webPermite implementar estilos de fuenteSe utiliza para evitar que se produzca un salto de página/columna/región dentro de un elementoSe utiliza para especificar los márgenes de un elemento

Propiedad CSS break-inside ​

Sintaxis ​

Ejemplo de la propiedad break-inside: ​

Resultado ​

Valores ​

Práctica ​

Propiedad CSS break-inside

Sintaxis

Ejemplo de la propiedad break-inside:

Resultado

Valores

Práctica