Перейти к содержанию

column-count

Свойство column-count определяет количество колонок в многоколоночном тексте.

Демо

Колонки и таблицы

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* <integer> value */
column-count: 3;

/* Keyword value */
column-count: auto;

/* Global values */
column-count: inherit;
column-count: initial;
column-count: unset;

Значения

<число>
Целое число больше нуля, задающее оптимальное число колонок.
auto
Число колонок вычисляется автоматически на основе других свойств (column-width, column-gap).

Примечание

Firefox поддерживает свойство -moz-column-count.

Safari, Chrome и Аndroid поддерживают свойство -webkit-column-count.

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

1
column-count: auto;

Применяется к блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Спецификации

Поддержка браузерами

Can I Use multicolumn? Data on support for the multicolumn feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>column-count</title>
    <style>
      .book {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
      }
    </style>
  </head>
  <body>
    <div class="book">
      Контрапункт контрастных фактур дает структурный
      midi-контроллер, таким образом объектом имитации
      является число длительностей в каждой из относительно
      автономных ритмогрупп ведущего голоса. Протяженность,
      по определению, просветляет флэнжер, хотя это довольно
      часто напоминает песни Джима Моррисона и Патти Смит.
    </div>
  </body>
</html>

Комментарии