Proprietà CSS break-after

Definizione e uso

L'attributo break-after determina se dovrebbe verificarsi una pagina di interruzione (page-break), una interruzione di colonna (column-break) o una interruzione di regione (region-break) dopo l'elemento specificato.

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

Utilizzando break-after, puoi informare il browser di interrompere la pagina, la colonna o la regione dopo l'elemento a cui è applicato l'attributo break-after, o evitare di spezzare l'elemento e spostarlo su due pagine.

Esempio

Inserisci sempre il simbolo di pagina prima dell'elemento <footer>.

@media print {
  footer {
    break-after: always;
  }
}

Sintassi CSS

break-after: 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. Effettua automaticamente la pagina, la colonna, la regione dopo l'elemento.
all Inserisci sempre il simbolo di pagina immediatamente dopo la scatola principale.
always Inserisci sempre il simbolo di pagina dopo l'elemento.
avoid Evita di interrompere la pagina, la colonna, la regione dopo l'elemento.
avoid-column Evita di inserire la colonna dopo l'elemento.
avoid-page Evita di paginare dopo l'elemento.
avoid-region Evita di dividere dopo l'elemento.
colonna Inserisci sempre il simbolo di colonna dopo l'elemento.
sinistra Inserisci uno o due simboli di pagina dopo l'elemento per formattare la pagina successiva come pagina sinistra.
pagina Inserisci sempre il simbolo di pagina dopo l'elemento.
rovesciata Inserisci uno o due simboli di pagina dopo la scatola principale per formattare la pagina successiva come pagina rovesciata.
regione Inserisci sempre il simbolo di divisione dopo l'elemento.
destra Inserisci uno o due simboli di pagina dopo l'elemento per formattare la pagina successiva come pagina destra.
verso Inserisci uno o due simboli di pagina dopo la scatola principale per formattare la pagina successiva come pagina verso.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial。
inherit Inherita 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.breakAfter="always"

Più esempi

Esempio

Inserisci sempre il simbolo di pagina dopo l'elemento con id "toc":

@media print {
  #toc {
    break-after: always;
  }
}

Esempio

Inserisci sempre il simbolo di divisione dopo l'elemento <ul> in una certa area:

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

Supporto del browser

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

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