Свойство column-count

Свойство column-count задает рекомендуемое количество колонок в многоколоночном тексте. Их реальное количество может отличаться от заданного, в зависимости от ширины колонки и размера промежутка между ними.

Синтаксис

cssселектор {
  column-count: число | auto;
}

Значения

Значение по умолчанию: auto.

Пример

В данном примере текст разобьется на 3 колонки (конечно же, в браузерах, которые поддерживают многоколоночность, в остальных будет просто обычный текст в одну колонку):

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

css#elem {
  column-count: 3;
  text-align: justify;
}

Результат:

Пример . Значение auto

В данном примере указана ширина колонки column-width в 150px, а их количество column-count стоит в значении auto - браузер сам подберет необходимое количество колонок и промежуток между ними:

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

css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

Смотрите также