CSS break-inside
La proprietà CSS break-inside in CSS3 evita l'interruzione all'interno di un elemento
La proprietà break-inside è introdotta in CSS3 e serve per impedire che il contenuto di un elemento venga spezzato tra colonne, pagine o regioni. È fondamentale in layout complessi e nella stampa per mantenere l’integrità visiva di blocchi di contenuto.
Sintassi
Significato dei valori principali:
auto: comportamento predefinito; il contenuto può essere interrotto all'interno.
avoid: cerca di evitare qualsiasi tipo di interruzione all'interno dell'elemento.
avoid-page: evita un'interruzione di pagina all'interno dell'elemento (utile in contesti di stampa).
avoid-column: evita l'interruzione tra colonne (in layout multicolonna).
avoid-region: evita l'interruzione tra regioni (utilizzato in layout avanzati con più regioni).
Esempio proprietà: break-inside
Codice Esempio: break-inside
.break-inside-example {
column-count: 2;
column-gap: 30px;
}.box {
background-color: #f4f4f4;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #aaa;
border-radius: 4px;
font-size: 16px;
}.no-break {
break-inside: avoid;
}
Contenuto Esempio: break-inside
Esempio di utilizzo di break-inside
In questo esempio, utilizziamo break-inside: avoid per evitare che un blocco venga spezzato tra due colonne:
break-inside: avoid.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula sem a orci.
Fusce commodo, velit in viverra finibus, leo felis aliquet nulla, vel efficitur massa.
CSS e HTML per evitare interruzioni interne:
<style>
.break-inside-example {
column-count: 2;
column-gap: 30px;
}
.box {
background-color: #f4f4f4;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #aaa;
border-radius: 4px;
font-size: 16px;
}
.no-break {
break-inside: avoid;
}
</style>
<div class="break-inside-example">
<div class="box no-break">
<strong>Blocco 1:</strong> Questo blocco non sarà spezzato tra le colonne.
</div>
<div class="box">
<strong>Blocco 2:</strong> Questo può essere spezzato tra le colonne.
</div>
</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.
Supporto Browser
IP: 216.73.216.108
