CSS :: Свойство column-span
css-свойство column-span (от англ. column span – охват колонок) определяет, должен ли элемент занимать ширину (пересекать) все колонки многоколоночного родительского элемента или же располагаться только в одной из них. Это может потребоваться, например, для заголовков статей, которые должны идти по центру пересекая все колонки.
На данный момент свойство хорошо поддерживается браузером Opera, а Safari, Chrome и Аndroid поддерживают его через префикс в виде -webkit-column-span. Браузер Firefox на данный момент свойство не поддерживает.
Характеристики
- Значение по умолчанию: none.
- Применяется: к блочным элементам (за исключением таблиц), а также ячейкам и к элементам, у которых значение свойства display установлено в inline-block.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.columnSpan="value".
Синтаксис
column-span: none | all
Значения
- none – элемент будет занимать ширину всего одной колонки наравне с обычным текстом.
- all – элемент будет занимать ширину всех колонок.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-multicol-1/#propdef-column-span
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/column-span
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> article{ width: 400px; margin: 0.7em; padding: 0.5em; border: 1px solid grey; column-count: 2; } article h1, article h2{ text-align: center; column-span: all; -webkit-column-span: all; } article h2{ font-size: 1.3em; } article p{ margin: 0px; padding: 0px; } </style> </head> <body> <article> <h1>Заголовок 1-го уровня</h1> <h2>Заголовок 2-го уровня</h2> <p> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> <h2>Заголовок 2-го уровня</h2> <p> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> </article> </body> </html>
Пример №1