Proprietà CSS break-inside
La proprietà CSS break-inside definisce se un'interruzione all'interno del box principale è consentita, evitata o forzata. Scopri la proprietà e prova gli esempi.
La proprietà CSS break-inside controlla se un'interruzione di frammentazione (un'interruzione di pagina, colonna o regione) può cadere all'interno del box di un elemento. Usala per tenere unito un contenuto in modo che non venga diviso tra due pagine stampate o due colonne di un layout multi-colonna.
Un esempio pratico comune: in un articolo multi-colonna non vuoi che una figura, un blocco di codice o un'intestazione con il primo paragrafo vengano spezzati con metà in una colonna e metà nella successiva. Impostare break-inside: avoid su quell'elemento indica al browser di spostare l'intero box nella colonna o pagina successiva anziché dividerlo.
Questa proprietà si applica solo nei contesti di frammentazione — cioè quando il contenuto scorre effettivamente attraverso frammenti:
- Stampa (
@media print), dove il contenuto è suddiviso tra le pagine. - Layout multi-colonna, dove il contenuto scorre tra le colonne (vedi
column-count). - Regioni CSS (il valore
avoid-region), una specifica più datata con supporto molto limitato.
Quando il contenuto non è frammentato (un normale blocco a schermo), break-inside non ha alcun effetto visibile.
Ogni confine di elemento è controllato da tre proprietà correlate:
- Break-after, che si applica all'elemento precedente.
- Break-before, che si applica all'elemento seguente.
- Break-inside, che si applica all'elemento contenitore.
La specifica di frammentazione CSS gestisce il comportamento delle interruzioni come segue:
- Le interruzioni forzate (ad es.
always,left,right) specificate dabreak-beforeobreak-afterhanno la precedenza e si verificheranno. - Se non viene attivata nessuna interruzione forzata,
break-insidedetermina se il browser tenta di evitare l'interruzione all'interno dell'elemento. Impostandola suavoidsi impediscono interruzioni di pagina, colonna o regione all'interno del box.
| Valore iniziale | auto |
|---|---|
| Si applica a | elementi a livello di blocco. |
| Ereditabile | No. |
| Animabile | Discreto. |
| Versione | CSS3 |
| Sintassi DOM | object.style.breakInside = "avoid"; |
Sintassi
Sintassi della proprietà CSS break-inside
break-inside: auto | avoid | avoid-page | avoid-column | avoid-region | initial | inherit;Esempio della proprietà break-inside:
Esempio della proprietà CSS break-inside con il valore avoid
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.multicol {
background-color: #eee;
padding: 10px;
/* Safari and Chrome */
-webkit-column-count: 3;
-webkit-column-rule: 2px dotted #ccc;
/* Firefox */
-moz-column-count: 3;
-moz-column-rule: 2px dotted #ccc;
/* CSS3 */
column-count: 3;
column-rule: 2px dotted #ccc;
}
.multicol hr {
break-inside: avoid;
}
</style>
</head>
<body>
<div class="multicol">
<h2>Lorem ipsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<hr />
<h2>Lorem ipsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</body>
</html>Risultato
![Proprietà CSS break-inside](https://api.w3docs.com/uploads/media/default/0001/03/e03a2e39ef51e5dd859aa1ab137e06e33638a3ba.png "CSS break-inside Property" =420x)
Nell'esempio precedente, le tre colonne contengono ciascuna un'intestazione e un paragrafo, e l'<hr> ha break-inside: avoid in modo che la riga non venga mai divisa tra le colonne.
Valori
| Valore | Descrizione |
|---|---|
| auto | Predefinito. Consente normali interruzioni di pagina, colonna o regione all'interno dell'elemento. |
| avoid | Evita qualsiasi interruzione di pagina, colonna o regione all'interno dell'elemento. |
| avoid-page | Evita un'interruzione di pagina all'interno dell'elemento. |
| avoid-column | Evita un'interruzione di colonna all'interno dell'elemento. |
| avoid-region | Evita un'interruzione di regione all'interno dell'elemento. |
| initial | Imposta la proprietà al suo valore predefinito (auto). |
| inherit | Eredita la proprietà dall'elemento padre. |
Supporto browser
break-inside con i valori auto e avoid è supportato da tutti i browser moderni (Chrome, Edge, Firefox, Safari). Le parole chiave avoid-page e avoid-column hanno un supporto più disomogeneo, e avoid-region è di fatto non supportata perché le CSS Regions non sono mai state distribuite ampiamente. Per risultati affidabili e compatibili con tutti i browser, preferisci break-inside: avoid.
Nel codice relativo alla stampa potresti ancora trovare la vecchia proprietà page-break-inside: avoid;. È l'equivalente legacy di break-inside: avoid ed è mantenuta per compatibilità con le versioni precedenti, quindi è comune dichiararle entrambe:
.keep-together {
page-break-inside: avoid; /* legacy */
break-inside: avoid; /* modern */
}