Свойство column-rule
задает границу
между колонками в многоколоночном тексте.
По принимаемым значениям совпадает со свойством
border
.
Пример . Тип solid
В данном примере текст разобьется на 3
колонки с границами между колонками в виде
сплошной линии толщиной в 1px
(расстояние
между столбцами сформируется автоматически,
так как задан column-gap
в значении normal
):
<div id="elem">
некий длинный текст
</div>
#elem {
column-rule: 1px solid black;
column-count: 3;
column-gap: normal;
text-align: justify;
}
:
Пример . Влияние column-gap
В данном примере текст разобьется на 3
колонки с промежутком между ними в 50px
.
Граница при этом пройдет по середине промежутка
(справа и слева от границы будет по 25px
):
<div id="elem">
некий длинный текст
</div>
#elem {
column-rule: 1px solid black;
column-count: 3;
column-gap: 50px;
text-align: justify;
}
:
Смотрите также
-
свойство
column-width
,
которое задает ширину колонки -
свойство
column-count
,
которое задает количество колонок -
свойство
column-gap
,
которое задает промежуток между колонками -
свойство
column-span
,
которое задает количество столбцов, на которые должен растягиваться элемент -
свойство
columns
,
которое является свойством-сокращением для многоколоночности