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

column-span

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

Это свойство обычно применяют для заголовков текста или изображений, которые не должны разбиваться на колонки.

Демо

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

Синтаксис

1
2
3
4
5
6
7
8
/* Keyword values */
column-span: none;
column-span: all;

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

Значения

none

Элемент наряду с обычным содержимым занимает ширину одной колонки.

all

Элемент занимает все колонки.

Примечание

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

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

1
column-span: none;

Применяется к блочным элементам (кроме таблиц), ячейкам и элементам, у которых 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
38
39
40
41
42
43
44
45
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>column-span</title>
        <style>
            .book {
                column-count: 3;
                column-width: 200px;
                column-gap: 2em;
                -webkit-column-count: 3;
                -webkit-column-width: 200px;
                -webkit-column-gap: 2em;
            }
            .book h1 {
                column-span: all;
                -webkit-column-span: all;
            }
        </style>
    </head>
    <body>
        <div class="book">
            <h1>
                Звукорядный аккорд: асинхронное ритмическое
                поле или адажио?
            </h1>
            Как было показано выше, кризис жанра дает
            звукоряд, и здесь в качестве модуса
            конструктивных элементов используется ряд
            каких-либо единых длительностей. Фьюжн, по
            определению, полифигурно варьирует гармонический
            интервал, и если в одних голосах или пластах
            музыкальной ткани сочинения еще продолжаются
            конструктивно-композиционные процессы предыдущей
            части, то в других — происходит становление
            новых. Трехчастная фактурная форма, в первом
            приближении, возможна. Форшлаг изящно продолжает
            хамбакер, и если в одних голосах или пластах
            музыкальной ткани сочинения еще продолжаются
            конструктивно-композиционные процессы предыдущей
            части, то в других — происходит становление
            новых.
        </div>
    </body>
</html>

Комментарии