Propiedad CSS page-break
La propiedad CSS page-break agrupa tres propiedades: page-break-before, page-break-after y page-break-inside. Aprende su uso y ve ejemplos.
No existe una propiedad única page-break en la especificación de CSS. El nombre hace referencia a una familia de tres propiedades relacionadas: page-break-before, page-break-after y page-break-inside. Juntas controlan dónde se produce un salto de página cuando un documento se envía a una impresora (o se guarda como PDF), de modo que puedes mantener el contenido relacionado unido y evitar que encabezados, tablas o imágenes queden divididos entre dos hojas.
Estas propiedades solo tienen efecto en medios paginados — impresión o vista previa de impresión. No producen ningún resultado visible en una pantalla normal, por lo que casi siempre se definen dentro de un bloque @media print. Tampoco tienen efecto sobre un <div> vacío ni sobre elementos posicionados de forma absoluta.
Esta página cubre las tres propiedades, cuándo usar cada una y los reemplazos modernos que deberías preferir en código nuevo.
¿Cuándo usaría esto?
Razones habituales para controlar los saltos de página:
- Iniciar cada sección en una página nueva — por ejemplo, forzar un salto de página antes de cada
<h1>en un informe largo. - Mantener bloques juntos — evitar que una tabla, figura o bloque de código quede dividido entre dos páginas.
- Evitar encabezados huérfanos — un encabezado que aparece al final de una página con su contenido en la siguiente tiene mal aspecto.
Reemplazos modernos: las propiedades break-*
Las propiedades page-break-* son heredadas. La especificación CSS Fragmentation las reemplazó con las más cortas break-before, break-after y break-inside, que también funcionan en diseños de varias columnas y de región — no solo para impresión. Los navegadores siguen admitiendo los nombres antiguos por compatibilidad con versiones anteriores y los asignan a los nuevos, por lo que el enfoque robusto más sencillo es declarar ambos:
@media print {
h1 {
page-break-before: always; /* legacy */
break-before: page; /* modern equivalent */
}
}El resto de esta página muestra cada propiedad heredada junto a su equivalente moderno.
page-break-after
page-break-after agrega un salto de página después de un elemento. Por ejemplo, para finalizar un capítulo de modo que el siguiente comience en una hoja nueva:
La propiedad page-break-after ha sido reemplazada por la propiedad break-after.
Ejemplo de código CSS de page-break-after
@media print {
.chapter {
page-break-after: always;
/* modern equivalent: break-after: page; */
}
}page-break-before
page-break-before agrega un salto de página antes de un elemento — útil para que cada encabezado principal comience en una página nueva:
La propiedad page-break-before ha sido reemplazada por la propiedad break-before.
Ejemplo de código CSS de page-break-before
@media print {
h2 {
page-break-before: always;
/* modern equivalent: break-before: page; */
}
}Los valores left y right son útiles para la impresión a doble cara: fuerzan los saltos necesarios para que el siguiente elemento comience en una página izquierda o derecha, respectivamente.
page-break-inside
page-break-inside controla si se permite un salto dentro de un elemento. Usa avoid para impedir que una tabla, figura o párrafo quede dividido entre dos páginas. Solo acepta auto y avoid.
La propiedad page-break-inside ha sido reemplazada por la propiedad break-inside.
Ejemplo de la propiedad break-inside:
El siguiente ejemplo usa la propiedad moderna break-inside, que reemplaza a la obsoleta page-break-inside.
Ejemplo de las propiedades CSS page-break y break-inside|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<h2>Page-break property example</h2>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| auto | Deja que el navegador decida dónde hacer el salto. Este es el valor predeterminado. |
| always | Fuerza siempre un salto de página (antes o después del elemento). |
| avoid | Evita un salto de página (antes, después o dentro del elemento). |
| left | Fuerza uno o dos saltos para que el contenido siguiente comience en una página izquierda. |
| right | Fuerza uno o dos saltos para que el contenido siguiente comience en una página derecha. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Qué valores aplican a cada propiedad:
| Propiedad | Valores aceptados |
|---|---|
page-break-before | auto, always, avoid, left, right |
page-break-after | auto, always, avoid, left, right |
page-break-inside | auto, avoid |
Temas relacionados
break-after— el reemplazo moderno depage-break-after.break-inside— el reemplazo moderno depage-break-inside.@media— se usa para apuntar a la salida de impresión con@media print.columns— diseño de varias columnas, dondebreak-insidetambién es útil.