Свойство column-count задает рекомендуемое
количество колонок в многоколоночном тексте.
Их реальное количество может отличаться от
заданного, в зависимости от ширины колонки
и размера промежутка между ними.
Синтаксис
селектор {
column-count: число | auto;
}
Значения
| Значение | Описание |
|---|---|
| число | Задает указанное количество колонок. Точнее, рекомендует браузеру использовать это количество колонок, так как их реальное количество может отличаться от заданного, в зависимости от ширины колонки и размера промежутка между ними. |
auto |
Браузер сам подбирает оптимальное количество колонок. |
Значение по умолчанию: auto.
Пример
В данном примере текст разобьется на 3 колонки (конечно же, в браузерах, которые поддерживают многоколоночность, в остальных будет просто обычный текст в одну колонку):
<div id="elem">
некий длинный текст
</div>
#elem {
column-count: 3;
text-align: justify;
}
:
Пример . Значение auto
В данном примере указана ширина колонки column-width
в 150px, а их количество column-count
стоит в значении auto - браузер сам
подберет необходимое количество колонок и
промежуток между ними:
<div id="elem">
некий длинный текст
</div>
#elem {
column-count: auto;
column-width: 150px;
text-align: justify;
}
:
Смотрите также
-
свойство
column-width,
которое задает ширину колонки -
свойство
column-gap,
которое задает промежуток между колонками -
свойство
column-rule,
которое задает границу между колонками -
свойство
column-span,
которое задает количество столбцов, на которые должен растягиваться элемент -
свойство
columns,
которое является свойством-сокращением для многоколоночности