Свойство CSS column-span
Свойство CSS column-span определяет, охватывает ли элемент одну колонку или все колонки. Значения и примеры.
Свойство CSS column-span управляет тем, остаётся ли элемент внутри одной колонки многоколоночного макета или растягивается на все колонки. Это одно из свойств CSS3.
На этой странице описано, что делает column-span, какие значения принимает, приведены рабочие примеры для каждого из них, а также рассмотрены типичные случаи применения и подводные камни.
Какую проблему решает
Когда текст разбивается на несколько колонок с помощью column-count или columns, каждый дочерний элемент многоколоночного контейнера распределяется по колонкам — включая заголовки. Заголовок раздела, который должен выглядеть как баннер над всем блоком, иначе окажется зажат в первой колонке.
column-span: all выводит элемент из потока колонок и растягивает его на всю ширину, при этом контент выше и ниже продолжает течь по колонкам. Именно так журналы и газеты оформляют заголовок над многоколоночным текстом статьи.
.article {
column-count: 3;
}
.article h2 {
column-span: all; /* headline runs the full width above the 3 columns */
}Элемент может охватывать колонки только если он является блочным элементом в нормальном потоке. Плавающие, абсолютно позиционированные и строчные элементы игнорируют column-span.
| Начальное значение | none |
|---|---|
| Применяется к | блочным элементам в нормальном потоке |
| Наследуется | Нет. |
| Анимируемое | Нет. |
| Версия | CSS Multi-column Layout Module Level 1 |
| DOM Синтаксис | object.style.columnSpan = "all"; (Note: CSS properties use camelCase in JavaScript) |
Синтаксис
Синтаксис свойства CSS column-span
column-span: none | all | initial | inherit;Пример: значение none
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: none;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Результат
При значении none заголовок обрабатывается как обычный контент и остаётся внутри первой колонки. В следующем примере тот же заголовок охватывает все четыре колонки.
Пример: значение all
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Пример: значение initial
initial сбрасывает column-span до значения по умолчанию — none — так что заголовок ведёт себя точно так же, как в первом примере, и остаётся в одной колонке.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: initial;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Пример: значение inherit
inherit берёт вычисленное значение column-span у родительского элемента. Обратите внимание, что column-span не наследуется по умолчанию, поэтому это ключевое слово используется только тогда, когда вы явно хотите, чтобы дочерний элемент скопировал настройку родителя.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: inherit;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Когда использовать column-span
- Заголовки и названия разделов, которые должны располагаться над многоколоночным текстом — как шапка газеты.
- Выносные цитаты или выделенные блоки, разрывающие ритм колонок для акцента.
- Широкие медиаэлементы — полноширинное изображение, таблица или диаграмма, которые выглядели бы сжатыми в одной узкой колонке.
Во всех остальных случаях оставляйте значение по умолчанию none, чтобы контент естественно распределялся по колонкам.
На что обратить внимание
- Только
noneиallявляются значениями охвата. Нетcolumn-span: 2для охвата произвольного числа колонок — только всё или ничего. - Охватывающий элемент разделяет блок колонок. Контент перед ним заполняет колонки, затем элемент занимает всю ширину, а оставшийся контент начинает новый набор колонок ниже.
column-spanработает только внутри многоколоночного контейнера. Безcolumn-countилиcolumnsу родителя свойство не имеет эффекта.column-span: allможет конфликтовать сbreak-insideи балансировкой колонок в некоторых браузерах, поэтому тестируйте длинный контент.
Связанные свойства
column-count— задаёт количество колонок, на которые делится контент.column-width— задаёт идеальную ширину каждой колонки.columns— сокращённая запись дляcolumn-widthиcolumn-count.column-gap— задаёт расстояние между колонками.column-rule— рисует линию между колонками.
Значения
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Элемент не охватывает все колонки; он остаётся в одной колонке. |
| all | Элемент охватывает все колонки. |
| initial | Устанавливает свойство в значение по умолчанию (none). |
| inherit | Наследует свойство от родительского элемента. |