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

Примеры

HTML Результат

htmlCodes

<!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