Proprietà CSS page-break-inside
La proprietà CSS page-break-inside definisce un'interruzione di pagina all'interno di un elemento specificato. Scopri i valori di questa proprietà.
La proprietà CSS page-break-inside controlla se un'interruzione di pagina è consentita all'interno di un elemento quando il documento viene stampato. Un'interruzione di pagina è il punto in cui il contenuto si interrompe su una pagina stampata e continua sulla successiva. Usa questa proprietà per evitare che un blocco di contenuto — un paragrafo, un elenco, una figura o una riga di tabella — venga suddiviso su due pagine.
Questa proprietà ha effetto solo nei contesti di media paginati (stampa, anteprima di stampa o salvataggio in PDF). Non ha effetti visibili su uno schermo normale, dove il contenuto scorre in modo continuo invece di distribuirsi su pagine discrete.
Quando usarla
Il caso più comune è page-break-inside: avoid, che indica al browser di mantenere un elemento insieme su una singola pagina invece di dividerlo. Obiettivi tipici:
- Mantenere un'intestazione collegata al testo che la segue.
- Evitare che un singolo elenco, blocco di codice o
<figure>venga tagliato a metà. - Mantenere intatta una riga di tabella, una scheda o una voce di una fattura.
Se l'elemento è più alto di un'intera pagina, il browser non può rispettare avoid — il contenuto deve interrompersi da qualche parte — ma inizierà l'elemento su una nuova pagina affinché il maggior numero possibile di elementi rimanga insieme.
page-break-inside è una proprietà CSS2 legacy. La sostituzione moderna è break-inside, che funziona per pagine stampate, layout multi-colonna e regioni, e supporta valori più precisi come avoid-page e avoid-column.
Per compatibilità con le versioni precedenti, i browser trattano page-break-inside come un alias di break-inside, quindi i siti esistenti continuano a funzionare. Preferisci break-inside nel nuovo codice.
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi a livello di blocco. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | object.style.pageBreakInside = "avoid"; |
Sintassi
page-break-inside: auto | avoid | initial | inherit;Poiché la proprietà ha rilevanza solo in stampa, viene solitamente limitata all'interno di una regola @media print in modo da non influire sul layout su schermo:
@media print {
/* Don't split tables or figures across pages */
table,
figure {
page-break-inside: avoid;
}
}Esempi
page-break-inside con il valore avoid
In questo esempio, ogni paragrafo, elenco e sezione .list viene impostato per rimanere su una sola pagina. Quando si stampa questo documento (o si apre l'anteprima di stampa), il browser eviterà di dividere uno qualsiasi di questi blocchi attraverso un'interruzione di pagina.
<!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 {
page-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>
<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>page-break-inside con il valore auto
auto è il valore iniziale e ripristina il comportamento predefinito: il browser è libero di inserire un'interruzione di pagina all'interno dell'elemento dove necessario. Impostarlo esplicitamente è utile per sovrascrivere una regola avoid ereditata o precedente per un elemento specifico.
<!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 {
page-break-inside: auto;
}
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>
<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 | Predefinito. Consente un'interruzione di pagina all'interno dell'elemento quando necessario. |
avoid | Evita di inserire un'interruzione di pagina all'interno dell'elemento, mantenendolo unito quando possibile. |
initial | Imposta la proprietà al suo valore predefinito (auto). |
inherit | Eredita il valore dall'elemento padre. |
Proprietà correlate
page-break-inside fa parte di una famiglia di proprietà di frammentazione che controllano dove si interrompe il contenuto stampato:
page-break-beforeepage-break-after— forzano o evitano un'interruzione prima o dopo un elemento.break-insideebreak-before— le sostituzioni moderne e più potenti che gestiscono anche i layout multi-colonna.
Le interruzioni di pagina interagiscono strettamente con i layout multi-colonna creati dalle proprietà columns e column-width.
Supporto dei browser
page-break-inside è supportata in tutti i principali browser, ma il supporto per il valore avoid durante la stampa è stato storicamente inconsistente. Per i risultati più affidabili nei nuovi progetti, usa break-inside: avoid, che i browser associano automaticamente a page-break-inside.