Proprietà column-rule

La proprietà column-rule imposta un bordo tra le colonne in un testo multicolonna. Nei valori accettati coincide con la proprietà border.

Esempio . Tipo solid

In questo esempio il testo verrà suddiviso in 3 colonne con bordi tra le colonne sotto forma di linea continua spessa 1px (la distanza tra le colonne si formerà automaticamente, poiché è impostato column-gap con valore normal):

html<div id="elem">
  some long text
</div>

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: normal;
  text-align: justify;
}

Результат:

Esempio . Influenza di column-gap

In questo esempio il testo verrà suddiviso in 3 colonne con un intervallo tra loro di 50px. Il bordo passerà al centro dell'intervallo (a destra e a sinistra del bordo ci saranno 25px ciascuno):

html<div id="elem">
  some long text
</div>

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

Vedi anche