Proprietà break-inside CSS

Definizione e uso

L'attributo break-inside determina se, all'interno dell'elemento specificato, devono verificarsi interruzioni di pagina (page-break), divisioni in colonne (column-break) o divisioni di regione (region-break).

L'attributo break-inside espande l'attributo page-break-inside del CSS2.

Utilizzando break-inside, puoi informare il browser di evitare interruzioni all'interno di immagini, frammenti di codice, tabelle e liste.

Esempio

Evitare la paginazione all'interno dell'elemento <img>:

@media print {
  img {
    display: block;
    break-inside: avoid;
  }
}

Sintassi CSS

break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Valore dell'attributo

Valore Descrizione
auto Predefinito. Effettuare automaticamente la paginazione, la divisione in colonne e la sezione all'interno dell'elemento.
avoid Evitare la rottura di pagina, colonna o regione all'interno dell'elemento.
avoid-column Evitare la divisione in colonne all'interno dell'elemento.
avoid-page Evitare la paginazione all'interno dell'elemento.
avoid-region Evitare la sezione all'interno dell'elemento.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: auto
Ereditarietà: No
Produzione di animazioni: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.breakInside="always"

Più esempi

Evitare la paginazione all'interno degli elementi <table>, <ul>, <ol>:

@media print {
  table, ul, ol {
    break-inside: avoid;
  }
}

Supporto del browser

I numeri nella tabella indicano la versione del browser iniziale che supporta interamente questa proprietà.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0