css властивість column-span

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

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

Елемент, який охоплює декілька стовпчиків, називається "елемент, що охоплює".

правити

+ додати пораду чи нотатку

Синтаксис

column-span: none|all|initial|inherit;

Властивість column-span може отримувати 4 значень:

none

Елемент займає ширину однієї колонки. Без задання

автор: Svitlana

правити

all

Елемент займає все колонки.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
column-span	1.0 -webkit-	Не підтримується	3.0 -webkit-	11.1	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
column-span	1.0 -webkit-	Не підтримується	3.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="cols">
    <p>Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</p>
    <h2>Заголовок через усі колонки</h2>
    <p>Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</p>
</div>

.cols {
    column-count: 3;
}

h2 {
    column-span: all;
    background: #eef6ff;
}