CSS :: Свойство column-count

css-свойство column-count (от англ. column count – количество колонок) определяет количество колонок, на которое должен быть разделен элемент.

Характеристики

Значение по умолчанию: auto.
Применяется: к блочным элементам (за исключением таблиц), а также ячейкам и к элементам, у которых значение свойства display установлено в inline-block.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.columnCount="value".

Синтаксис

column-count: auto | <число>

Значения

auto – браузер вычисляет количество колонок автоматически исходя из значений других свойств.
число – целое положительное число, задающее оптимальное количество колонок в элементе.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-multicol-1/#cc

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/column-count

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 400px;
		margin: 1em;
		padding: 0.7em;
		border: 1px solid green;
		}
		
		.p_1{column-count: 2;}
		
		.p_2{column-count: 3;}

	</style>
	
</head>
<body>

	<p class="p_1">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст		
	</p> 
 
	<p  class="p_2">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>
	
 </body>
</html>

Пример №1