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

Определение и применение

CSS свойство white-space определяет как отображать пробелы внутри элемента.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
white-space	1.0	3.5	9.5	3.0	8.0	12.0

CSS синтаксис:

white-space:"normal | nowrap | pre | pre-line | pre-wrap | initial | inherit";

JavaScript синтаксис:

object.style.whiteSpace = "pre-wrap"

Значения свойства

Значение	Описание
normal	Если элемент содержит более одного пробельного символа, то браузер интерпретирует их как один (объединяет). Пользовательский перенос на новую строку обрабатывается как пробельный символ. Перенос текста на новую строку происходит автоматически по необходимости (по заполнению отведенной, либо заданной области). Это значение по умолчанию.
nowrap	Если элемент содержит более одного пробельного символа, то браузер интерпретирует их как один (объединяет). Пользовательский перенос на новую строку обрабатывается как пробельный символ. Перенос текста на новую строку производится только в том случае если присутствует элемент <br> (текст может выходить из отведённой области).
pre	Все пробелы и переносы строк сохраняются (текст может выходить из отведённой области). Значение свойства действует как одноимённый элемент <pre>.
pre-line	Если элемент содержит более одного пробельного символа, то браузер интерпретирует их как один (объединяет). Пользовательские переносы на новую строку учитываются. Перенос текста на новую строку происходит автоматически по необходимости (по заполнению отведенной, либо заданной области).
pre-wrap	Все пробелы и переносы строк сохраняются, как при использовании элемента <pre>, но в случае если элемент выходит из заданной области, то он переносится на новую строку в автоматическом режиме.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства white-space.</title>
<style> 
.test {
white-space : pre; /* задаём, что все пробелы и перенос строк сохраняются */
width : 200px; /* задаём ширину текстового блока. */
background-color : Tan; /* задаём задний фон блока. */
}
</style>
</head>
	<body>
		<p class = "test">              Все пробелы и переносы строк сохраняются
			(текст может выходить из отведённой области).
			Значение свойства действует как одноимённый элемент <pre>
		</p>
	</body>
</html>

CSS свойства