CSS page-break-after
La proprietà CSS2 page-break-after
forza un'interruzione di pagina dopo un elemento
La proprietà page-break-after
, introdotta in CSS2, viene utilizzata per controllare le interruzioni di pagina nei documenti stampati. È ideale per separare sezioni, capitoli o gruppi di contenuti che devono iniziare su una nuova pagina nel formato cartaceo.
Sintassi
Significato dei valori principali:
-
auto: Comportamento predefinito; nessuna interruzione di pagina forzata dopo l’elemento.
-
always: Inserisce sempre un’interruzione di pagina dopo l’elemento.
-
avoid: Evita, se possibile, l’interruzione di pagina dopo l’elemento.
-
left: Inserisce un'interruzione in modo che la pagina successiva inizi su una pagina dispari (lato sinistro in stampa fronte-retro).
-
right: Inserisce un'interruzione in modo che la pagina successiva inizi su una pagina pari (lato destro in stampa fronte-retro).
Esempio proprietà: page-break-after
Codice Esempio: page-break-after

@media print {
.page-break-example {
page-break-after: always;
}
}
Contenuto Esempio: page-break-after
Esempio di utilizzo di page-break-after
(solo in stampa)
In questo esempio, una interruzione di pagina viene forzata dopo il primo paragrafo, ma è visibile solo nella modalità di stampa:
Sezione 1
Questa sezione verrà seguita da un'interruzione di pagina quando il documento viene stampato.
Sezione 2
Questa sezione inizierà su una nuova pagina in stampa, grazie alla regola page-break-after: always
.
CSS e HTML per il salto pagina:
<style>
@media print {
.page-break-example {
page-break-after: always;
}
}
</style>
<div class="page-break-example">
<h2>Sezione 1</h2>
<p>Contenuto da stampare.</p>
</div>
<div>
<h2>Sezione 2</h2>
<p>Nuova pagina in stampa.</p>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.