Sintassi

Significato dei valori principali:

• auto: comportamento di default, lascia che il browser decida.

• always: forza un'interruzione prima dell'elemento.

• all: forza un'interruzione prima dell'elemento, indipendentemente dal tipo di contenitore (pagina, colonna o regione).

• avoid: cerca di evitare interruzioni prima dell'elemento.

• page: forza un'interruzione di pagina prima dell'elemento (utile in stampa).

• column: forza un'interruzione di colonna prima dell'elemento (in layout multicolonna).

• region: forza un'interruzione di regione (in layout a più regioni).

• left: forza un'interruzione e inizia su una pagina dispari (lato sinistro nei libri).

• right: forza un'interruzione e inizia su una pagina pari (lato destro nei libri).

• recto: come right, indica la pagina frontale nei libri stampati.

• verso: come left, indica la pagina retro.

• avoid-page: cerca di evitare l'interruzione di pagina prima dell'elemento.

• avoid-column: cerca di evitare l'interruzione di colonna prima dell'elemento.

• avoid-region: cerca di evitare l'interruzione di regione prima dell'elemento.

Esempio proprietà: break-before

Codice Esempio: break-before

CODE: CSS

1. .break-before-example {

2.   column-count: 2;

3.   column-gap: 40px;

4. }

6. .item {

7.   background-color: #add8e6;

8.   padding: 10px;

9.   margin-bottom: 10px;

10.   border-radius: 5px;

11.   font-size: 18px;

12. }

14. .break-start {

15.   break-before: column;

16.   background-color: #ffa07a;

17. }

Contenuto Esempio: break-before

  
  <style>
    .break-before-example {
      column-count: 2;
      column-gap: 40px;
    }

    .item {
      background-color: #add8e6;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      font-size: 18px;
    }

    .break-start {
      break-before: column;
      background-color: #ffa07a;
    }
  </style>

  <div class="break-before-example">
    <div class="item">Blocco 1</div>
    <div class="item break-start">Blocco 2 - Inizia in una nuova colonna</div>
    <div class="item">Blocco 3</div>
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser