Свойство white-space

Свойство white-space устанавливает как переносить текст на новую строку, а также как отображать пробелы между словами и переносы строк (места, где был нажат Enter при наборе кода).

Синтаксис

селектор {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Значения

Значение	Описание
`nowrap`	Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега br заставит текст перенестись на новую строку.
`pre`	Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и enter-ами (если в коде набрано несколько пробелов - на экране тоже будет несколько). При этом браузер не будет переносить текст на новую строку, если он не помещается в контейнер - текст просто вылезет за его границы. Аналог тега pre, но в отличие от него не меняет шрифт на моноширинный (про моноширинный шрифт см. свойство font-family).
`pre-wrap`	То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер - браузер перенесет его на другую строку.
`pre-line`	Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк).
`normal`	Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране.

Значение по умолчанию: normal.

Пример . Значение nowrap

В данном примере текст не поместится в контейнер и вылезет за его границы, так как задано значение nowrap:

<div id="elem">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Пример . Значение nowrap и тег br

Если добавить тег br - текст перенесется на новую строку (именно в том месте, где стоит br):

<div id="elem">
	Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Пример . Значение pre

В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей Tab, с Enter и так далее):

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Пример . Значение pre-wrap

А сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

Смотрите также

свойства word-break и overflow-wrap,
которые позволяют перенести буквы длинного слова на новую строку
свойство tab-size,
которое устанавливает размер отступа, созданного клавишей Tab
свойство hyphens,
которое включает переносы слов по слогам
свойство overflow,
которое обрезает вылезающие за границу блока части
тег pre,
который показывает текст так, как он был набран в редакторе HTML кода