Propiedad CSS page-break-after
La propiedad CSS page-break-after define un salto de página después de un elemento especificado. Consulta los valores de esta propiedad.
La propiedad CSS page-break-after controla si un salto de página se fuerza o se evita después de un elemento dado 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). Un salto de página finaliza la página actual y desplaza el contenido siguiente a una nueva página.
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 debe decidir dónde termina una hoja de papel y dónde comienza la siguiente. page-break-after te permite influir en esas decisiones — por ejemplo, para iniciar cada nuevo capítulo en la parte superior de una página nueva, o para evitar que un encabezado quede aislado al final de una.
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.
page-break-after está obsoleta. Ha sido reemplazada por la propiedad más versátil break-after, que también funciona con diseños de varias columnas y regiones. Para código nuevo, usa break-after. Los navegadores tratan page-break-after como un alias de break-after, por lo que los sitios existentes siguen funcionando.
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos de bloque. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.pageBreakAfter = "avoid"; |
Sintaxis
page-break-after: auto | avoid | always | left | right | initial | inherit;Ejemplo: iniciar cada sección en una nueva página
Un uso habitual es forzar que cada sección de nivel superior comience en su propia página impresa. Aplica page-break-after: always a cada sección para que se inserte un salto después de ella:
@media print {
.chapter {
page-break-after: always;
}
}<div class="chapter">
<h2>Chapter 1</h2>
<p>...content...</p>
</div>
<div class="chapter">
<h2>Chapter 2</h2>
<p>...content...</p>
</div>Al imprimir, el Capítulo 2 ahora comienza en la parte superior de la página 2.
Ejemplo: evitar un salto después de un elemento
Usa avoid para desaconsejar un salto justo después de un elemento — por ejemplo, para evitar que un encabezado quede solo al final de una página, separado del texto que lo sigue:
@media print {
h2 {
page-break-after: avoid;
}
}Consejo: combina con page-break-before y page-break-inside
page-break-after es una de tres propiedades relacionadas. Úsalas juntas para tener control total sobre los diseños impresos:
page-break-before— controla los saltos antes de un elemento.page-break-inside— evita que un elemento (una tabla o figura) se divida entre dos páginas.
Valores
| Valor | Descripción |
|---|---|
| auto | Predeterminado. Permite al navegador decidir si insertar un salto de página después del elemento. |
| avoid | Evita insertar un salto de página después del elemento cuando sea posible. |
| always | Siempre fuerza un salto de página después del elemento. |
| left | Fuerza un salto de página después del elemento para que la siguiente página se formatee como página izquierda. |
| right | Fuerza un salto de página después del elemento para que la siguiente página se formatee como página derecha. |
| initial | Establece esta propiedad en su valor predeterminado (auto). |
| inherit | Hereda esta propiedad de su elemento padre. |
Los valores left y right son especialmente útiles para la impresión a doble cara, donde se desea que una sección comience en un lado específico del pliego.
Nota: Para el desarrollo web moderno, utiliza la propiedad break-after en su lugar, ya que page-break-after está obsoleta.