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

column-width

Свойство column-width задаёт оптимальную ширину колонки в многоколоночном тексте.

Реальная ширина колонки может быть больше введённого значения, сокращение указанной ширины приводит к отмене нескольких колонок, текст при этом выстраивается в одну колонку.

Демо

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/* Keyword value */
column-width: auto;

/* Different <length> values */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

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

Значения

<размер>

Значение ширины колонки в абсолютных единицах CSS (например, пикселях).

auto

Ширина колонок вычисляется автоматически на основе других свойств (column-count, column-gap).

Примечание

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

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

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

1
column-width: 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
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>column-width</title>
        <style>
            .book {
                column-count: 3;
                column-width: 200px;
                -moz-column-count: 3;
                -moz-column-width: 200px;
                -webkit-column-count: 3;
                -webkit-column-width: 200px;
            }
        </style>
    </head>
    <body>
        <div class="book">
            Как было показано выше, кризис жанра дает
            звукоряд, и здесь в качестве модуса
            конструктивных элементов используется ряд
            каких-либо единых длительностей. Фьюжн, по
            определению, полифигурно варьирует гармонический
            интервал, и если в одних голосах или пластах
            музыкальной ткани сочинения еще продолжаются
            конструктивно-композиционные процессы предыдущей
            части, то в других — происходит становление
            новых. Трехчастная фактурная форма, в первом
            приближении, возможна. Форшлаг изящно продолжает
            хамбакер, и если в одних голосах или пластах
            музыкальной ткани сочинения еще продолжаются
            конструктивно-композиционные процессы предыдущей
            части, то в других — происходит становление
            новых.
        </div>
    </body>
</html>

Комментарии