Sintassi

Significato dei valori principali:

• auto: comportamento predefinito; il browser decide se interrompere o meno.

• always: forza un'interruzione subito dopo l'elemento.

• all: forza un'interruzione sia di pagina, colonna o regione, a seconda del contesto.

• avoid: cerca di evitare l'interruzione dopo l'elemento.

• page: forza un'interruzione di pagina dopo l'elemento (utile per la stampa).

• column: forza un'interruzione di colonna dopo l'elemento (nei layout multicolonna).

• region: forza un'interruzione di regione (usato in contesti avanzati come pagine impaginate).

• 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 in contesti occidentali (pagina frontale).

• verso: come left (pagina retro).

• avoid-page: evita un'interruzione di pagina dopo l'elemento.

• avoid-column: evita un'interruzione di colonna dopo l'elemento.

• avoid-region: evita un'interruzione di regione dopo l'elemento.

Esempio proprietà: break-after

Codice Esempio: break-after

CODE: CSS

1. .break-after-example {

2.   column-count: 2;

3.   column-gap: 40px;

4. }

6. .item {

7.   break-after: column;

8.   background-color: #dcdcdc;

9.   padding: 10px;

10.   margin-bottom: 10px;

11.   border-radius: 5px;

12.   font-size: 18px;

13. }

Contenuto Esempio: break-after

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

    .item {
      break-after: column;
      background-color: #dcdcdc;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      font-size: 18px;
    }
  </style>

  <div class="break-after-example">
    <div class="item">Blocco 1 - Dopo questo blocco ci sarà un'interruzione di colonna.</div>
    <div class="item">Blocco 2</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