Proprietà CSS page-break
La proprietà CSS page-break raggruppa tre proprietà: page-break-before, page-break-after e page-break-inside. Leggi la guida con esempi.
Non esiste una singola proprietà page-break nella specifica CSS. Il nome si riferisce a una famiglia di tre proprietà correlate: page-break-before, page-break-after e page-break-inside. Insieme controllano dove avviene un'interruzione di pagina quando un documento viene inviato a una stampante (o salvato come PDF), così puoi mantenere i contenuti correlati insieme ed evitare che intestazioni, tabelle o immagini vengano divise tra due fogli.
Queste proprietà hanno effetto solo nei media impaginati — stampa o anteprima di stampa. Non producono risultati visibili su uno schermo normale, quindi vengono quasi sempre impostate all'interno di un blocco @media print. Non hanno effetto neanche su un elemento <div> vuoto o su elementi posizionati in modo assoluto.
Questa pagina tratta tutte e tre le proprietà, quando utilizzare ciascuna e le sostituzioni moderne da preferire nel nuovo codice.
Quando usarle?
Ragioni comuni per controllare le interruzioni di pagina:
- Iniziare ogni sezione su una pagina nuova — ad es. forzare un'interruzione di pagina prima di ogni
<h1>in un lungo report. - Mantenere i blocchi uniti — impedire che una tabella, una figura o un blocco di codice vengano divisi tra due pagine.
- Evitare intestazioni orfane — un'intestazione che finisce in fondo a una pagina con il suo contenuto nella pagina successiva risulta spezzata.
Sostituzioni moderne: le proprietà break-*
Le proprietà page-break-* sono legacy. La specifica CSS Fragmentation le ha sostituite con le più brevi break-before, break-after e break-inside, che funzionano anche per i layout multicolonna e a regioni — non solo per la stampa. I browser supportano ancora i vecchi nomi per compatibilità con le versioni precedenti e li mappano su quelli nuovi, quindi l'approccio più robusto e semplice è dichiarare entrambi:
@media print {
h1 {
page-break-before: always; /* legacy */
break-before: page; /* modern equivalent */
}
}Il resto di questa pagina mostra ogni proprietà legacy accanto al suo equivalente moderno.
page-break-after
page-break-after aggiunge un'interruzione di pagina dopo un elemento. Ad esempio, per concludere un capitolo in modo che il successivo inizi su un nuovo foglio:
La proprietà page-break-after è sostituita dalla proprietà break-after.
Esempio di codice CSS page-break-after
@media print {
.chapter {
page-break-after: always;
/* modern equivalent: break-after: page; */
}
}page-break-before
page-break-before aggiunge un'interruzione di pagina prima di un elemento — utile per far iniziare ogni intestazione principale su una nuova pagina:
La proprietà page-break-before è sostituita dalla proprietà break-before.
Esempio di codice CSS page-break-before
@media print {
h2 {
page-break-before: always;
/* modern equivalent: break-before: page; */
}
}I valori left e right sono utili per la stampa fronte-retro: forzano un numero sufficiente di interruzioni in modo che l'elemento successivo inizi su una pagina sinistra o destra rispettivamente.
page-break-inside
page-break-inside controlla se è consentita un'interruzione all'interno di un elemento. Usa avoid per impedire che una tabella, una figura o un paragrafo vengano divisi tra due pagine. Accetta solo auto e avoid.
La proprietà page-break-inside è sostituita dalla proprietà break-inside.
Esempio della proprietà break-inside:
L'esempio seguente utilizza la moderna proprietà break-inside, che sostituisce la deprecata page-break-inside.
Esempio delle proprietà CSS page-break e break-inside|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<h2>Page-break property example</h2>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| auto | Lascia che il browser decida dove interrompere. Questo è il valore predefinito. |
| always | Forza sempre un'interruzione di pagina (prima o dopo l'elemento). |
| avoid | Evita un'interruzione di pagina (prima, dopo o all'interno dell'elemento). |
| left | Forza una o due interruzioni in modo che il contenuto seguente inizi su una pagina sinistra. |
| right | Forza una o due interruzioni in modo che il contenuto seguente inizi su una pagina destra. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Quali valori si applicano a ciascuna proprietà:
| Proprietà | Valori accettati |
|---|---|
page-break-before | auto, always, avoid, left, right |
page-break-after | auto, always, avoid, left, right |
page-break-inside | auto, avoid |
Argomenti correlati
break-after— la sostituzione moderna dipage-break-after.break-inside— la sostituzione moderna dipage-break-inside.@media— utilizzato per indirizzare l'output di stampa con@media print.columns— layout multicolonna, dovebreak-insideè anch'esso utile.