Eigenschaft column-rule

Die Eigenschaft column-rule legt die Grenzlinie zwischen Spalten in mehrspaltigem Text fest. In den akzeptierten Werten entspricht sie der Eigenschaft border.

Beispiel . Typ solid

In diesem Beispiel wird der Text in 3 Spalten unterteilt mit Grenzlinien zwischen den Spalten in Form einer durchgehenden Linie mit einer Dicke von 1px (der Abstand zwischen den Spalten wird automatisch gebildet, da column-gap auf den Wert normal gesetzt ist):

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

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

Результат:

Beispiel . Einfluss von column-gap

In diesem Beispiel wird der Text in 3 Spalten mit einem Zwischenraum von 50px unterteilt. Die Grenzlinie verläuft dabei in der Mitte des Zwischenraums (rechts und links von der Linie werden je 25px sein):

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

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

Результат:

Siehe auch