Proprietà CSS break-after

La proprietà CSS break-after controlla il comportamento di un'interruzione di frammentazione dopo un determinato riquadro. Un'interruzione di frammentazione è il punto in cui il contenuto viene suddiviso tra due frammenti — due pagine stampate, due colonne di un layout multicolonna o due regioni CSS. Con break-after è possibile forzare un'interruzione ("inizia la sezione successiva su una nuova pagina/colonna") o impedirla ("tieni questo titolo collegato al testo che lo segue").

Supporta i seguenti valori: auto, avoid, always, all, page, column, region, avoid-page, avoid-column e avoid-region.

Quando applicato a un elemento all'interno di un contenitore multicolonna che si trova anche in un contesto paginato, always (e all) forza sia un'interruzione di colonna che un'interruzione di pagina allo stesso confine.

Quando usare break-after

Ricorri a break-after ogni volta che il flusso naturale del contenuto si interromperebbe in un punto scomodo:

Fogli di stile per la stampa. Inizia ogni sezione di primo livello su un nuovo foglio con break-after: page, oppure evita che il totale di una fattura risulti isolato in cima alla pagina successiva.
Testo multicolonna. Sposta un sottotitolo in cima alla colonna successiva invece di lasciarlo in fondo a quella corrente.
Regioni CSS / visualizzatori di media paginati. Controlla il flusso del contenuto da un contenitore all'altro.

break-after ha effetto solo all'interno di un contesto di frammentazione — un documento stampato/paginato, un contenitore column-count/column-width o una catena di regioni. Su una pagina con scorrimento normale non produce alcun effetto visibile, motivo per cui l'esempio seguente utilizza un contenitore multicolonna.

Come si risolvono le proprietà di interruzione

Ogni confine di elemento è influenzato da tre proprietà:

break-after sull'elemento precedente.
break-before sull'elemento corrente.
break-inside sull'elemento padre.

Quando si applicano più proprietà di interruzione, le seguenti regole di risoluzione determinano il risultato:

Le interruzioni forzate (es. page, column, always) hanno priorità sulle interruzioni di tipo avoid.
Se si applicano più interruzioni forzate, break-before ha la precedenza su break-after, che ha la precedenza su break-inside.
Se uno qualsiasi dei valori applicabili è un'interruzione di tipo avoid (avoid, avoid-page, avoid-column o avoid-region), l'interruzione non verrà applicata.

Valore iniziale	auto
Si applica a	Elementi a livello di blocco.
Ereditato	No.
Animabile	discrete
Versione	CSS3
Sintassi DOM	object.style.breakAfter = "always";

Sintassi

Sintassi della proprietà CSS break-after

break-after: auto | avoid | always | all | page | column | region | avoid-page | avoid-column | avoid-region | initial | inherit;

Esempio di break-after con un'interruzione di colonna

In un contenitore a tre colonne, all'elemento <hr> viene assegnato break-after: column. Invece di lasciare che le colonne si bilancino automaticamente, il browser termina la colonna corrente subito dopo la riga e continua il resto del contenuto nella colonna successiva — così il secondo blocco "Lorem ipsum" inizia sempre in cima a una nuova colonna.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-after: column;
      }
    </style>
  </head>
  <body>
    <h2>Break-after property example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio di break-after con un'interruzione di pagina

Questo è l'utilizzo più comune nel mondo reale: un foglio di stile per la stampa che inizia ogni capitolo su una propria pagina. Apri l'anteprima di stampa del browser (Ctrl/Cmd + P) per vedere ogni <section> iniziare su un nuovo foglio.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      @media print {
        section {
          break-after: page;
        }
      }
    </style>
  </head>
  <body>
    <section>
      <h2>Chapter 1</h2>
      <p>This chapter prints on its own page.</p>
    </section>
    <section>
      <h2>Chapter 2</h2>
      <p>Because the previous section has break-after: page,
         this chapter starts at the top of the next printed page.</p>
    </section>
    <section>
      <h2>Chapter 3</h2>
      <p>And so does this one.</p>
    </section>
  </body>
</html>

Valori

Valore	Descrizione
auto	Consente qualsiasi interruzione (pagina, colonna, regione) dopo il riquadro principale.
avoid	Evita qualsiasi interruzione dopo il riquadro principale.
always	Forza un'interruzione dopo il riquadro principale.
all	Forza un'interruzione dopo il riquadro principale e tutti i riquadri contenitori dello stesso tipo (es. tutte le colonne o tutte le pagine).
page	Forza un'interruzione di pagina dopo il riquadro principale.
column	Forza un'interruzione di colonna dopo il riquadro principale.
region	Forza un'interruzione di regione dopo il riquadro principale.
avoid-page	Evita un'interruzione di pagina dopo il riquadro principale.
avoid-column	Evita un'interruzione di colonna dopo il riquadro principale.
avoid-region	Evita un'interruzione di regione dopo il riquadro principale.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Eredita questa proprietà dall'elemento padre.

Proprietà correlate

break-before — controlla l'interruzione prima di un riquadro (ha la precedenza su break-after allo stesso confine).
break-inside — impedisce che un singolo riquadro venga suddiviso tra frammenti.
page-break-after — il vecchio alias solo per la stampa mantenuto per compatibilità con le versioni precedenti.
columns e column-count — impostano il contesto multicolonna in cui agiscono le interruzioni di colonna.

Esercitazione

Pratica

Quali dei seguenti sono valori validi per la proprietà CSS 'break-after'?