Propiedad CSS break-before

La propiedad CSS break-before controla si se debe insertar un salto de página, columna o región antes de un elemento. Es el reemplazo moderno y multicontexto de la propiedad page-break-before, que solo funcionaba para impresión: la misma palabra clave ahora funciona para medios paginados (impresión/PDF), diseños multicolumna (column-count) y regiones CSS.

Esta página cubre qué hace break-before, cuándo es útil cada valor, cómo interactúa con las reglas de salto vecinas y un ejemplo ejecutable.

Por qué importa break-before

Dos problemas de diseño muy diferentes necesitan el mismo tipo de control:

Impresión. Cuando se envía un documento largo a una impresora o se exporta a PDF, el navegador decide dónde termina una página y comienza la siguiente. break-before: page permite forzar una nueva hoja — por ejemplo, para que cada <h1> de capítulo comience en la parte superior de una página nueva.
Texto multicolumna. En un diseño con column-count, el contenido fluye de una columna a la siguiente. break-before: column fuerza a que un encabezado o figura comience en una columna completamente nueva en lugar de quedar abandonado al final de la columna anterior.

La palabra clave avoid hace lo contrario: le pide al navegador que no realice un salto justo antes del elemento, que es la forma de mantener un encabezado unido al párrafo que le sigue.

Cómo se calcula break-before

Cuando dos elementos adyacentes solicitan cada uno un salto (uno con break-after, el siguiente con break-before), el navegador los combina y gana el salto más fuerte:

Los saltos forzados (always, page, column, left, right) siempre ocurren.
avoid es solo una sugerencia — el navegador puede seguir haciendo un salto si no tiene otra opción (por ejemplo, un elemento más alto que una sola página).
Si ninguno de los lados fuerza un salto, auto deja que el navegador decida.

Ten en cuenta que break-before solo tiene efecto en elementos que generan un cuadro y se encuentran en un contexto de fragmentación (un documento impreso, un contenedor multicolumna o una región). En una página normal de una sola columna en pantalla no tiene ningún efecto visible.

Propiedades relacionadas

break-after — el mismo control en el borde final de un elemento.
break-inside — evita que un elemento (una fila de tabla, una figura, una tarjeta) se divida a través de un salto.
columns y column-rule — configuran el diseño multicolumna dentro del cual funciona break-before: column.

Valor inicial	auto
Se aplica a	Elementos de nivel de bloque.
Heredable	No.
Animable	Discreto.
Versión	CSS3
Sintaxis DOM	object.style.breakBefore = "auto";

Sintaxis

break-before: auto | avoid | always | page | column | left | right | initial | inherit;

Ejemplo: evitar un salto en un diseño multicolumna

En el bloque multicolumna a continuación, el <hr> entre las dos secciones establece break-before: avoid, pidiendo al navegador que no inicie una nueva columna justo antes de la regla. Redimensiona el resultado para que el texto se ajuste en tres columnas y ver el efecto:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-before: avoid;
      }
    </style>
  </head>
  <body>
    <h2>Break-before example</h2>
    <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

Ejemplo: forzar un salto de página al imprimir

Un requisito habitual de impresión es que cada capítulo comience en su propia página. Aplica break-before: page al encabezado del capítulo y la regla tendrá efecto en la vista previa de impresión (Ctrl/Cmd + P) o al exportar a PDF:

.chapter {
  break-before: page;
}

<h1 class="chapter">Chapter 1</h1>
<p>Intro text…</p>

<h1 class="chapter">Chapter 2</h1>
<p>This heading begins on a new printed page.</p>

Como el salto solo se aplica a los medios paginados, no tiene ningún efecto en una pantalla de desplazamiento normal — abre el cuadro de diálogo de impresión para verlo.

Valores

Valor	Descripción
auto	Predeterminado. Permite cualquier salto antes del cuadro principal.
avoid	Evita cualquier salto antes del cuadro principal.
always	Fuerza un salto antes del cuadro principal.
page	Fuerza un salto de página antes del cuadro principal.
column	Fuerza un salto de columna antes del cuadro principal.
left	Fuerza uno o dos saltos de página antes del cuadro principal para que la siguiente página se formatee como página izquierda.
right	Fuerza uno o dos saltos de página antes del cuadro principal para que la siguiente página se formatee como página derecha.
initial	Establece esta propiedad en su valor predeterminado.
inherit	Hereda esta propiedad de su elemento padre.

Práctica

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

Crea un salto antes de un elemento.Cambia el color de un elemento.Crea un salto después de un elemento.Influye en los saltos de página, columna o región antes de que se genere un elemento.Modifica la forma de un elemento.