Свойство 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,
которое является свойством-сокращением для многоколоночности