No hay una page-breakpropiedad real en CSS. En realidad, es un conjunto de 3 propiedades: page-break-before, page-break-aftery page-break-inside. Estas propiedades ayudan a definir cómo se supone que debe comportarse el documento cuando se imprime. Por ejemplo, para hacer un documento impreso más parecido a un libro.
Propiedades
salto de página antes
La page-break-beforepropiedad agrega un salto de página antes del elemento al que se aplica.
Nota : esta propiedad está en proceso de ser reemplazada por la break-beforepropiedad más genérica . Esta nueva propiedad también maneja los saltos de columna y región mientras es sintácticamente compatible con page-break-before. Por lo tanto, antes de usar page-break-before, verifique si puede usar break-beforeen su lugar.
Un caso de uso común para esto es aplicarlo al selector #commentspara que un usuario que imprima una página con comentarios pueda elegir fácilmente imprimir todo el documento pero detenerse antes de los comentarios de manera limpia.
salto de página después
La page-break-afterpropiedad agrega un salto de página después del elemento al que se aplica.
Nota : esta propiedad está en proceso de ser reemplazada por la break-afterpropiedad más genérica . Esta nueva propiedad también maneja los saltos de columna y región mientras es sintácticamente compatible con page-break-after. Por lo tanto, antes de usar page-break-after, verifique si puede usar break-afteren su lugar.
salto de página dentro
La page-break-insidepropiedad agrega un salto de página dentro del elemento al que se aplica.
Sintaxis
page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoidLos valores lefty rightpara page-break-beforey se page-break-afterrefieren a un diseño de pliego (como un libro) donde hay distintas páginas izquierda y derecha. Funcionan así:
leftfuerza uno o dos saltos de página después del elemento para que la página siguiente tenga el formato de página izquierda.rightfuerza uno o dos saltos de página después del elemento para que la página siguiente tenga el formato de página derecha.
Considérelo alwayscomo una mezcla de ambos. La especificación dice:
Un agente de usuario conforme puede interpretar los valores 'izquierda' y 'derecha' como 'siempre'.
Ejemplo
@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )Este fragmento de código hace 3 cosas:
- fuerza un salto de página antes de todos los
h2encabezados (quizás las etiquetas h2 en su documento son títulos de capítulos que merecen una página nueva) - evita los saltos de página justo después de los subtítulos porque se ve extraño
- evita los saltos de página dentro de las
preetiquetas y las comillas a nivel de bloque
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | Alguna | Alguna | 7+ | 4+ | TBD | TBD |
Puede imprimir desde dispositivos móviles, como AirPrint en iOS, pero no lo hemos probado mucho. Si alguien tiene datos sobre soporte, háganoslo saber.