CSS свойство column-span
Определение и применение
CSS свойство column-span определяет, должен ли элемент пересекать все колонки, либо позиционируется в
одной из них.
Схематичное отображение работы свойства column-span представлено на следующем изображении:
Попробуйте значения column-span
Меняется заголовок внутри многоколоночного контейнера: all растягивает его на все колонки и разделяет поток текста.
column-span: none
HTML и CSS примера
<div class="stage">
<p>
Колонки распределяют длинный текст по доступному пространству. Читатель
движется сверху вниз, затем переходит к следующей колонке.
</p>
<h4 class="demo-target">Заголовок</h4>
<p>
Размер колонок и промежутки влияют на длину строк. Разделительная линия
рисуется в промежутке.
</p>
</div>
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.stage {
height: auto;
column-count: 2;
column-gap: 20px;
font-size: 14px;
}
p {
margin: 0 0 12px;
}
.demo-target {
margin: 12px 0;
padding: 8px;
background: #ffe4bd;
column-span: none;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.stage {
height: auto;
column-count: 2;
column-gap: 20px;
font-size: 14px;
}
p {
margin: 0 0 12px;
}
.demo-target {
margin: 12px 0;
padding: 8px;
background: #ffe4bd;
column-span: all;
}
Поддержка браузерами
Спецификация: CSS multicol
Поддерживается во всех основных браузерах с 2020 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
column-span | 50 Версия 50 выпущена в 2016 г. Версия 6 выпущена в 2010 г. — Префикс -webkit- | 12 Версия 12 выпущена в 2015 г. Версия 12 выпущена в 2015 г. — Префикс -webkit- | 71 | 37 Версия 37 выпущена в 2016 г. Версия 15 выпущена в 2013 г. — Префикс -webkit- | 9 Версия 9 выпущена в 2015 г. Версия 5.1 выпущена в 2011 г. — Префикс -webkit- | 50 Версия 50 выпущена в 2016 г. Версия 18 выпущена в 2012 г. — Префикс -webkit- | 79 | 37 Версия 37 выпущена в 2016 г. Версия 14 выпущена в 2013 г. — Префикс -webkit- | 9 Версия 9 выпущена в 2015 г. Версия 5 выпущена в 2011 г. — Префикс -webkit- | 5.0 Версия 5.0 выпущена в 2016 г. Версия 1.0 выпущена в 2013 г. — Префикс -webkit- | 50 Версия 50 выпущена в 2016 г. Версия 4.4 выпущена в 2013 г. — Префикс -webkit- | 9 Версия 9 выпущена в 2015 г. Версия 5 выпущена в 2011 г. — Префикс -webkit- |
all | 6 | 12 | 71 | 15 | 5.1 | 18 | 79 | 14 | 5 | 1.0 | 4.4 | 5 |
none | 6 | 12 | 71 | 15 | 5.1 | 18 | 79 | 14 | 5 | 1.0 | 4.4 | 5 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
CSS синтаксис:
column-span: none | all;
/* Глобальные значения */
column-span: initial | inherit | unset | revert | revert-layer;| — выбор варианта.
JavaScript синтаксис:
element.style.columnSpan = "all";Начальное значение свойства
none.
Значения свойства
| Значение | Описание |
|---|---|
none |
Элемент находится в одной колонке. Начальное значение. |
all |
Элемент проходит через все колонки (пересекает все колонки). |
initial
|
Устанавливает начальное значение свойства. |
inherit
|
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для ненаследуемого свойства column-span устанавливает его
начальное значение.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Спецификация
CSS Multi-column Layout — спецификация column-span.
Наследуется
Нет.
Анимируемое
Тип анимации — дискретный: значение переключается без плавных промежуточных положений.
Примеры, попробуйте сами
Многоколоночный текст
Замените all на none у подзаголовка: он вернётся в одну колонку.
base.css
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.5 system-ui,
sans-serif;
color: #172c3d;
}
section {
margin-bottom: 24px;
min-width: 0;
}
h3 {
margin: 0 0 12px;
font-size: 16px;
}
.item {
padding: 8px;
min-width: 0;
background: #c5dbea;
border: 1px solid #35658a;
overflow-wrap: anywhere;
}
.sample {
font-size: 14px;
}
p {
margin-top: 0;
}
index.html
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Многоколоночный текст</title>
</head>
<body>
<div class="sample">
<p>Первый абзац. Колонки делят текст на вертикальные полосы и помогают сравнить ширину дорожек.</p>
<h3 class="target">Подзаголовок</h3>
<p>Второй абзац. Измените учебный CSS и посмотрите, как браузер перераспределит содержимое между колонками.</p>
<p>Третий абзац. Длина текста и размеры контейнера влияют на результат раскладки.</p>
</div>
</body>
</html>
style.css
.sample {
column-count: 2;
}
.target {
column-span: all;
}