Proprietà CSS page-break-after
La proprietà CSS page-break-after definisce l'interruzione di pagina dopo un elemento specificato. Scopri i valori di questa proprietà.
La proprietà CSS page-break-after controlla se un'interruzione di pagina viene forzata o evitata dopo un determinato elemento quando il documento viene stampato o visualizzato in qualsiasi contesto di media paginati (stampa, esportazione PDF, anteprima di stampa). Un'interruzione di pagina termina la pagina corrente e sposta il contenuto successivo su una nuova pagina.
Su uno schermo normale, il contenuto web scorre in un'unica pagina continua, quindi non c'è nulla da interrompere. Ma quando quella stessa pagina viene inviata a una stampante o salvata come PDF, il browser deve decidere dove termina un foglio di carta e dove inizia il successivo. page-break-after consente di influenzare queste decisioni — ad esempio, per iniziare ogni nuovo capitolo in cima a una pagina nuova, oppure per evitare che un'intestazione rimanga isolata in fondo a una pagina.
La proprietà non ha effetti visibili sullo schermo; in genere viene inserita in un blocco @media print affinché le regole si applichino solo durante la stampa del documento. Non si applica agli elementi posizionati in modo assoluto.
page-break-after è deprecata. È stata sostituita dalla più versatile proprietà break-after, che funziona anche con layout multi-colonna e a regioni. Per il nuovo codice, preferire break-after. I browser trattano page-break-after come un alias di break-after, quindi i siti esistenti continuano a funzionare.
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi block-level. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | object.style.pageBreakAfter = "avoid"; |
Sintassi
page-break-after: auto | avoid | always | left | right | initial | inherit;Esempio: iniziare ogni sezione su una nuova pagina
Un utilizzo comune consiste nel forzare ogni sezione di primo livello a iniziare su una pagina stampata separata. Applicare page-break-after: always a ciascuna sezione in modo da inserire un'interruzione dopo di essa:
@media print {
.chapter {
page-break-after: always;
}
}<div class="chapter">
<h2>Chapter 1</h2>
<p>...content...</p>
</div>
<div class="chapter">
<h2>Chapter 2</h2>
<p>...content...</p>
</div>In fase di stampa, il Capitolo 2 inizierà ora in cima alla pagina 2.
Esempio: impedire un'interruzione dopo un elemento
Usare avoid per scoraggiare un'interruzione subito dopo un elemento — ad esempio, per evitare che un'intestazione rimanga da sola in fondo a una pagina, separata dal testo che la segue:
@media print {
h2 {
page-break-after: avoid;
}
}Consiglio: abbinare con page-break-before e page-break-inside
page-break-after è una delle tre proprietà correlate. Usarle insieme per avere il controllo completo sui layout stampati:
page-break-before— controlla le interruzioni prima di un elemento.page-break-inside— impedisce che un elemento (una tabella o una figura) venga suddiviso su due pagine.
Valori
| Valore | Descrizione |
|---|---|
| auto | Predefinito. Lascia al browser la decisione se inserire o meno un'interruzione di pagina dopo l'elemento. |
| avoid | Evita di inserire un'interruzione di pagina dopo l'elemento, quando possibile. |
| always | Forza sempre un'interruzione di pagina dopo l'elemento. |
| left | Forza un'interruzione di pagina dopo l'elemento in modo che la pagina successiva sia formattata come pagina sinistra. |
| right | Forza un'interruzione di pagina dopo l'elemento in modo che la pagina successiva sia formattata come pagina destra. |
| initial | Imposta questa proprietà al suo valore predefinito (auto). |
| inherit | Eredita questa proprietà dall'elemento padre. |
I valori left e right sono utili principalmente per la stampa fronte-retro, quando si desidera che una sezione inizi su un lato specifico del foglio aperto.
Nota: per lo sviluppo web moderno, usare la proprietà break-after al posto di page-break-after, poiché quest'ultima è deprecata.