CSS :: Свойство white-space

css-свойство white-space (от англ. white-space – пробел) используется для определения способа обработки пробельных символов и переносов строк внутри элемента.

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

Значение по умолчанию: normal.
Применяется: ко всем элементам.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.whiteSpace="value".

Синтаксис

white-space: normal | nowrap | pre | pre-line | pre-wrap

Значения

normal – все пробельные символы и переносы строк в коде HTML преобразуются в один пробел, а разрывы строк добавляются браузером автоматически.
pre – текст форматируется аналогично содержимому тега <pre>, т.е. отображается так, как вводит его пользователь: сохраняются все подряд идущие пробельные символы и переносы строк, автоматические переносы не добавляются.
nowrap – текст отображается одной строкой, подряд идущие пробельные символы заменяются одним пробелом, переносы строк в коде HTML игнорируются, автоматические переносы строк не добавляются, действительны только принудительные разрывы строк, сделанные при помощи тегов <br>.
pre-wrap – все подряд идущие пробельные символы и переносы строк сохраняются, но разрывы строк добавляются браузером автоматически.
pre-line – все подряд идущие пробельные символы заменяются одним пробелом, но переносы строк в коде HTML сохраняются, а также по необходимости браузером добавляются автоматические переносы.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-text-3/#propdef-white-space

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

Примеры

HTML Результат

htmlCodes

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

	<style>
		
		p{
		width: 450px;
		margin: 3em;
		}
		
		.p_1{
		white-space: normal;
		background-color: red
		}
		
		.p_2{
		white-space: pre;
		background-color: blue
		}
		
		.p_3{
		white-space: nowrap;
		background-color: green
		}
		
		.p_4{
		white-space: pre-wrap;
		background-color: yellow
		}
		
		.p_5{
		white-space: pre-line;
		background-color: violet
		}
		
	</style>
</head>
<body>

	<p class="p_1">
normal:	используется    значение браузера по умолчанию, т.е. все пробельные 
		символы и переносы строк    в коде HTML преобразуются в один пробел, 
		        а разрывы строк добавляются браузером автоматически.
	</p>
	
	<p class="p_2">
pre: текст форматируется аналогично содержимому элемента «pre», т.е.  
	отображается так, как вводит его пользователь: сохраняются все подряд идущие 
пробельные символы и переносы строк, автоматические переносы не добавляются.
	</p>
	
	<p class="p_3">
nowrap: текст отображается одной строкой, подряд идущие пробельные символы <br>
		заменяются одним пробелом, переносы строк в коде HTML игнорируются  , <br>
	автоматические переносы строк не добавляются, действительны только 	<br>
	принудителььные разрывы строк, сделанные <br>
		при помощи элементов «br».
	</p>
	
	<p class="p_4">
pre-wrap: все подряд идущие пробельные символы и переносы строк сохраняются  , 
	но разрывы    строк добавляются 	браузером автоматически.
	</p>
	
	<p class="p_5">
pre-line: все подряд идущие пробельные символы заменяются одним пробелом, но 
	переносы строк в коде HTML сохраняются     , а также по необходимости 
	браузером добавляются 
			автоматические переносы.
	</p>
	
</body>
</html>

Пример №1