Uso de Page break con @media queries. Saltos de página en los medios impresos

El crédito lo primero:
Idea original de David Walsh. Publicada en su blog.

Antes de seguir, si desconoces o quieres conocer un poco más qué son los medios paginados, la regla @page y cómo crear tu propio css para controlar la impresión de tu página, tienes este artículo: Estilos Css para imprimir: La regla @page en los medios paginados

Como sabes, se pueden controlar los saltos de página con las propiedades page-break-before antes del elemento, después: page-break-after o dentro del elemento: page-break-inside.
Recuerda que los saltos de página sólo se pueden aplicar a elementos de bloque.

La técnica que publica David Walsh se ayuda de las @media queries para tener un mayor control y hacerlos más fáciles.
Consiste en incluir un elemento en el html, en este caso un div con su clase: <div class="page-break", en aquellos puntos donde queramos forzar un salto de página a la hora de imprimir, tal que así:

<h1>Título de la página</h1> <!-- Bloque de contenido --> <!-- Más Contenido --> <div class="page-break"></div> <!-- Bloque de contenido --> <!-- Más Contenido --> <div class="page-break"></div> <!-- Bloque de contenido --> <!-- Más Contenido -->

Y en el Css definir las propiedades oportunas, discriminando los media con ayuda de las reglas @Media queries:

@media all { .page-break { display:none; } } @media print { .page-break { display:block; page-break-before:always; } }

Recuerda:
1.- el artículo original lo puedes ver aquí
2.- Si quieres más info sobre las reglas @media queries puedes hacer uso del buscador del blog.