Artículo actualizado en mayo de 2026. La versión original, publicada en el año 2000, cubría las propiedades de IE4 y Netscape Navigator 4. Esta revisión recoge el estándar CSS moderno, compatible con todos los navegadores actuales.
Por qué el navegador no sabe dónde cortar
Cuando mandas imprimir una página web, el navegador tiene que ajustar el contenido a páginas físicas de papel. Sin indicaciones tuyas, decide él dónde hacer los cortes: puede partir una tabla justo por la mitad, separar un encabezado de su párrafo o cortar una imagen en dos. Con unas pocas reglas CSS eso se controla con precisión.
La propiedad clave: break-before, break-after y break-inside
El estándar CSS moderno define tres propiedades para controlar los saltos de página (y de columna):
break-before: fuerza o prohíbe un salto antes del elemento.break-after: fuerza o prohíbe un salto después del elemento.break-inside: controla si el elemento puede partirse por dentro.
Los valores más habituales son always (siempre romper), avoid (nunca romper si es posible) y auto (el navegador decide).
/* Forzar nueva página antes de cada sección principal */
.seccion-nueva-pagina {
break-before: always;
}
/* Evitar que una tarjeta se parta entre dos páginas */
.tarjeta {
break-inside: avoid;
}
/* Forzar salto después de un bloque introductorio */
.intro {
break-after: always;
}
Estas propiedades son los sucesores directos de las antiguas page-break-before, page-break-after y page-break-inside, que siguen funcionando en todos los navegadores por compatibilidad. Si necesitas dar soporte a entornos muy concretos, puedes usar ambas a la vez:
.seccion-nueva-pagina {
page-break-before: always; /* compatibilidad legacy */
break-before: always; /* estándar actual */
}
Usar @media print para aislar los estilos de impresión
Lo más limpio es agrupar todas las reglas de impresión dentro de una media query @media print. Así no interfieren con el diseño en pantalla y es fácil encontrarlas y mantenerlas:
@media print {
/* Ocultar elementos que no tienen sentido en papel */
nav,
.menu-lateral,
.publicidad,
footer {
display: none;
}
/* Forzar nueva página antes de cada capítulo */
h1 {
break-before: always;
}
/* Evitar que encabezados queden solos al pie de una página */
h2, h3 {
break-after: avoid;
}
/* Evitar que bloques de código o tablas se partan */
pre,
table,
figure {
break-inside: avoid;
}
/* Asegurar que los colores se impriman aunque el navegador los elimine */
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Controlar líneas huérfanas y viudas
Dos propiedades menos conocidas pero muy útiles son orphans y widows. Indican cuántas líneas de texto debe quedar como mínimo al final o al principio de una página cuando un párrafo se divide:
@media print {
p {
orphans: 3; /* mínimo 3 líneas al final de la página */
widows: 3; /* mínimo 3 líneas al inicio de la siguiente */
}
}
Ejemplo práctico completo
Un informe dividido en secciones donde cada una empieza en página nueva y las tablas nunca se parten:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Informe anual</title>
<style>
@media print {
nav, .no-print { display: none; }
.capitulo { break-before: always; }
h2 { break-after: avoid; }
table { break-inside: avoid; }
p {
orphans: 3;
widows: 3;
}
}
</style>
</head>
<body>
<nav class="no-print">...</nav>
<section class="capitulo">
<h2>Capítulo 1</h2>
<p>Contenido del primer capítulo...</p>
<table>...</table>
</section>
<section class="capitulo">
<h2>Capítulo 2</h2>
<p>Contenido del segundo capítulo...</p>
</section>
</body>
</html>
Compatibilidad con los navegadores actuales
Propiedad | Chrome | Firefox | Safari | Edge |
| ? | ? | ? | ? |
| ? | ? | ? | ? |
| ? | ? | ? | ? |
| ? | ? | ? (-webkit-) | ? |
Si trabajas con hojas de estilo más amplias, el artículo sobre cómo funciona !important en CSS te ayudará a gestionar la especificidad cuando los estilos de impresión colisionan con los de pantalla. Y si usas un framework como Bootstrap, ten en cuenta que incluye su propia media query de impresión que puede necesitar ajustes.
Imagen: Pexels / anshul kumar