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

См. также CSS свойства hyphens, word-break, word-wrap, overflow-wrap, а также символы мягкого переноса wbr и ­, тег pre и тег br.

Синтаксис

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

Значения

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

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

Примеры

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

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

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing
elit.

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

В данном примере текст показывается так, как был набран в редакторе HTML кода. Последняя строка не поместится в контейнер и вылезет за его границы:

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

В данном примере текст показывается так, как был набран в редакторе HTML кода. Последняя строка не поместится в контейнер и браузер перенесет ее на другую строку, так как задано значение pre-wrap:

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Сейчас браузер расставит разрывы строк так, как это сделано в HTML коде, однако несколько пробелов будут проигнорированы и показан только один.

Сравните два текста. Вот так текст набран в HTML коде:

Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet ipsum.

А вот так работает pre-line:

p {
	width: 200px;
	white-space: pre-line;
	border: 1px solid red;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet ipsum.

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

Сравните два текста. Вот так текст набран в HTML коде:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

А вот так он покажется в браузере при white-space: normal:

p {
	width: 200px;
	white-space: normal;
	border: 1px solid red;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.