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

CSS свойства

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
white-space1.03.59.53.08.012.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 white-space.
Пример использования свойства CSS white-space.
CSS свойства