Свойство column-rule

Свойство column-rule задава граница между колонки в многоколонен текст. По приемани стойности съвпада със свойство border.

Пример . Тип solid

В този пример текст ще се раздели на 3 колони с граници между колоните във вид на плътна линия с дебелина 1px (разстоянието между колоните ще се формира автоматично, тъй като е зададен column-gap със стойност 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;
}

Результат:

Пример . Влияние на column-gap

В този пример текст ще се раздели на 3 колони с разстояние между тях от 50px. Границата ще премине по средата на разстоянието (отдясно и отляво на границата ще има по 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;
}

Результат:

Вижте също