Propiedad CSS page-break-before

La propiedad CSS page-break-before controla si se fuerza, evita o deja automático un salto de página antes de un elemento determinado cuando el documento se imprime o se muestra en cualquier contexto de medios paginados (impresión, exportación a PDF, vista previa de impresión).

En una pantalla normal, el contenido web fluye en un desplazamiento continuo, por lo que no hay nada que interrumpir. Pero cuando esa misma página se envía a una impresora o se guarda como PDF, el navegador tiene que decidir dónde termina una hoja de papel y comienza la siguiente. page-break-before te permite influir en esas decisiones — por ejemplo, para comenzar cada encabezado de capítulo en la parte superior de una página nueva, o para mantener el contenido unido.

La propiedad no tiene efecto visible en pantalla; normalmente se coloca dentro de un bloque @media print para que las reglas se apliquen solo cuando el documento se imprime. No se aplica a elementos con posicionamiento absoluto.

Sintaxis

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

Ejemplo: comenzar cada capítulo en una página nueva

Un uso común es forzar que cada encabezado de nivel superior comience en su propia página impresa. Aplica page-break-before: always a cada h2 para que comience una página nueva antes de él:

@media print {
  h2 {
    page-break-before: always;
  }
}

<h2>Chapter 1</h2>
<p>Content of chapter one...</p>

<h2>Chapter 2</h2>
<p>Content of chapter two...</p>

Al imprimir, "Chapter 2" comienza en la parte superior de una página nueva, incluso si "Chapter 1" dejó espacio en la página actual.

Ejemplo: forzar una página izquierda o derecha

Para documentos impresos por ambas caras (libros, informes), puedes controlar en qué lado del pliego comienza el elemento. Usa left o right para forzar una página impar o par antes del elemento:

@media print {
  .chapter-start {
    page-break-before: right; /* start on a right-hand (odd) page */
  }
}

Si el elemento ya comenzara en una página derecha, el navegador inserta una página en blanco para empujarlo a la siguiente página derecha. Este es el mismo comportamiento que utiliza el software de composición tipográfica para los comienzos de capítulo en los libros.

Ejemplo: suprimir saltos no deseados

Usa avoid para desalentar un salto inmediatamente antes de un elemento. Esto es útil para evitar que un párrafo introductorio quede separado del encabezado que lo precede:

@media print {
  h2 + p {
    page-break-before: avoid;
  }
}

Ten en cuenta que avoid es una sugerencia, no una garantía. Si no hay otro lugar razonable para interrumpir la página, el navegador puede insertar un salto de todas formas.

Valores

Los valores left y right están pensados para la impresión por ambas caras, donde se desea que el contenido comience en un lado específico del pliego.

Compatibilidad con navegadores y aspectos a tener en cuenta

• Todos los navegadores principales admiten auto, always y avoid. La compatibilidad con left y right es menos consistente entre navegadores y renderizadores de PDF.
• La propiedad se ignora en elementos en línea y en elementos con posicionamiento absoluto o fijo. Apunta a elementos a nivel de bloque como <div>, <section>, <h1>–<h6> o <p>.
• Establecer page-break-before: always en cada elemento de una lista o tabla puede producir muchas páginas cortas. Úsalo de forma selectiva en los límites lógicos de las secciones.
• page-break-before en un elemento hijo se aplica a la caja a nivel de bloque más cercana que genera, no al contenedor padre.

Consejo: combina con las otras propiedades de salto de página

page-break-before es una de las tres propiedades heredadas para el diseño de impresión. Úsalas juntas para un control completo:

• page-break-after — controla los saltos después de un elemento.
• page-break-inside — evita que un elemento (una tabla, figura o bloque de código) se divida entre dos páginas.

Para código moderno, migra a las propiedades de fragmentación equivalentes:

• break-before — reemplaza a page-break-before.
• break-after — reemplaza a page-break-after.
• break-inside — reemplaza a page-break-inside.

Consulta la guía de @media print para consejos sobre cómo construir una hoja de estilos de impresión completa, y las propiedades orphans y widows para controlar cuántas líneas de un párrafo quedan en una página antes o después de un salto.

Práctica