Właściwość column-rule

Właściwość column-rule ustawia obramowanie między kolumnami w tekście wielokolumnowym. Pod względem przyjmowanych wartości pokrywa się z właściwością border.

Przykład . Typ solid

W tym przykładzie tekst zostanie podzielony na 3 kolumny z obramowaniami między kolumnami w postaci ciągłej linii o grubości 1px (odległość między kolumnami utworzy się automatycznie, ponieważ ustawiono column-gap na wartości 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;
}

Результат:

Przykład . Wpływ column-gap

W tym przykładzie tekst zostanie podzielony na 3 kolumny z odstępem między nimi wynoszącym 50px. Obramowanie przebiegnie przez środek odstępu (na prawo i lewo od obramowania będzie po 25px):

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

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

Результат:

Zobacz też