Proprietà break-before CSS

Definizione e uso

L'attributo break-before determina se deve verificarsi una pagina di interruzione (page-break), una interruzione di colonna (column-break) o una interruzione di regione (region-break) prima dell'elemento specificato.

L'attributo break-before estende l'attributo page-break-before del CSS2.

Utilizzando break-before, puoi informare il browser di interrompere la pagina, la colonna o la regione prima dell'elemento con l'attributo break-after, o evitare di spezzare l'elemento e di spostarlo su due pagine.

Esempi

Inserisci sempre un segnatore di pagina prima dell'elemento <h1>:

@media print {
  h1 {
    break-before: always;
  }
}

Sintassi CSS

break-before: 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. Esegui automaticamente la pagina di transizione, la divisione della colonna e la divisione della regione prima dell'elemento.
all Inserisci sempre un segno di pagina di transizione immediatamente prima della scatola principale.
always Inserisci sempre un segno di pagina di transizione (page-break) prima dell'elemento.
avoid Evita di inserire una interruzione di pagina, colonna o regione prima dell'elemento.
avoid-column Evita di inserire una colonna di transizione prima dell'elemento.
avoid-page Evita di inserire una pagina di transizione prima dell'elemento.
avoid-region Evita di inserire una divisione prima dell'elemento.
colonna Inserisci sempre un segno di divisione colonna prima dell'elemento.
sinistra Inserisci uno o due segni di pagina di transizione prima dell'elemento per formattare la pagina successiva come pagina sinistra.
pagina Inserisci sempre un segno di pagina di transizione prima dell'elemento.
fronte Inserisci uno o due segni di pagina di transizione prima della scatola principale per formattare la pagina successiva come pagina fronte.
regione Inserisci sempre un segno di divisione prima dell'elemento.
destra Inserisci uno o due segni di pagina di transizione prima dell'elemento per formattare la pagina successiva come pagina destra.
verso Inserisci uno o due segni di pagina di transizione prima della scatola principale per formattare la pagina successiva come pagina verso.
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.breakBefore="always"

Più esempi

Esempi

Per garantire che tutte le nuove sezioni inizino dalla pagina corretta (ad esempio, nel libro), puoi usare break-before: per tutti gli elementi <h1>:

@media print {
  h1 {
    break-before: right;
  }
}

Esempi

Inserisci sempre un region-break: prima di <ul> all'interno di region.

.region ul {
    break-before: region;
  }
}

Supporto del browser

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

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