Proprietà CSS break-before

La proprietà CSS break-before controlla se un 'interruzione di pagina, colonna o regione deve essere inserita prima di un elemento. È la sostituzione moderna e multi-contesto della proprietà page-break-before, pensata solo per la stampa: la stessa parola chiave funziona ora per i media impaginati (stampa/PDF), i layout a più colonne (column-count) e le regioni CSS.

Questa pagina spiega cosa fa break-before, quando è utile ciascun valore, come interagisce con le regole di interruzione degli elementi adiacenti e include un esempio eseguibile.

Perché break-before è importante

Due problemi di layout molto diversi richiedono lo stesso tipo di controllo:

Stampa. Quando un documento lungo viene inviato a una stampante o esportato in PDF, il browser decide dove finisce una pagina e dove inizia la successiva. break-before: page consente di forzare un nuovo foglio — ad esempio, in modo che ogni <h1> di capitolo inizi in cima a una pagina nuova.
Testo a più colonne. In un layout con column-count il contenuto scorre da una colonna all'altra. break-before: column forza un'intestazione o una figura a iniziare una colonna nuova, invece di restare in fondo alla colonna precedente.

La parola chiave avoid fa l'opposto: chiede al browser di non interrompere subito prima dell'elemento, consentendo di mantenere un'intestazione unita al paragrafo che la segue.

Come viene calcolato break-before

Quando due elementi adiacenti richiedono entrambi un'interruzione (uno con break-after, il successivo con break-before), il browser le combina e vince l'interruzione più forte:

Le interruzioni forzate (always, page, column, left, right) avvengono sempre.
avoid è solo un suggerimento — il browser può comunque interrompere se non ha altra scelta (ad esempio, un elemento più alto di una singola pagina).
Se nessuno dei due lati forza un'interruzione, auto lascia decidere al browser.

Si noti che break-before ha effetto solo sugli elementi che generano un box e si trovano in un contesto di frammentazione (un documento stampato, un contenitore a più colonne o una regione). In una normale pagina su schermo a colonna singola non ha alcun effetto visibile.

Proprietà correlate

break-after — lo stesso controllo sul bordo finale di un elemento.
break-inside — impedisce che un elemento (una riga di tabella, una figura, una card) venga diviso su più interruzioni.
columns e column-rule — impostano il layout a più colonne in cui opera break-before: column.

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

Sintassi

break-before: auto | avoid | always | page | column | left | right | initial | inherit;

Esempio: evitare un'interruzione in un layout a più colonne

Nel blocco a più colonne qui sotto, l'<hr> tra le due sezioni ha break-before: avoid, che chiede al browser di non iniziare una nuova colonna subito prima della riga. Ridimensiona il risultato in modo che il testo si disponga su tre colonne per vedere l'effetto:

<!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-before: avoid;
      }
    </style>
  </head>
  <body>
    <h2>Break-before example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio: forzare un'interruzione di pagina durante la stampa

Un requisito comune per la stampa è iniziare ogni capitolo su una pagina propria. Applica break-before: page all'intestazione del capitolo e la regola ha effetto nell'anteprima di stampa (Ctrl/Cmd + P) o durante l'esportazione in PDF:

.chapter {
  break-before: page;
}

<h1 class="chapter">Chapter 1</h1>
<p>Intro text…</p>

<h1 class="chapter">Chapter 2</h1>
<p>This heading begins on a new printed page.</p>

Poiché l'interruzione si applica solo ai media impaginati, non ha effetto su una normale schermata a scorrimento — apri la finestra di dialogo di stampa per vederla.

Valori

Valore	Descrizione
auto	Predefinito. Consente qualsiasi interruzione prima del box principale.
avoid	Evita qualsiasi interruzione prima del box principale.
always	Forza un'interruzione prima del box principale.
page	Forza un'interruzione di pagina prima del box principale.
column	Forza un'interruzione di colonna prima del box principale.
left	Forza una o due interruzioni di pagina prima del box principale in modo che la pagina successiva sia formattata come pagina sinistra.
right	Forza una o due interruzioni di pagina prima del box principale in modo che la pagina successiva sia formattata come pagina destra.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Eredita questa proprietà dall'elemento padre.

Esercitazione

Pratica

Cosa fa la proprietà CSS 'break-before'?

Crea un'interruzione prima di un elemento.Cambia il colore di un elemento.Crea un'interruzione dopo un elemento.Influenza le interruzioni di pagina, colonna o regione prima che un elemento venga generato.Modifica la forma di un elemento.