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

CSS-свойство white-space управляет двумя вещами одновременно: как последовательности пробельных символов (пробелы, табуляции и переносы строк в исходном коде HTML) схлопываются или сохраняются, и переносится ли текст при достижении края контейнера.

По умолчанию браузеры агрессивно обрабатывают пробелы. Любая серия пробелов, табуляций или переносов строк в разметке схлопывается до одного пробела, а текст переносится по мере необходимости, чтобы уместиться в блок. Именно поэтому такой код:

<p>Hello       world</p>

отображается как Hello world с одним пробелом, сколько бы пробелов вы ни набрали. Свойство white-space позволяет изменить это поведение — например, чтобы сохранить форматирование исходного кода, удержать переносы строк в стихотворении или запретить переносить метку на две строки.

Когда применять

nowrap — зафиксировать метку кнопки, ячейку таблицы или пункт навигации на одной строке.
pre / pre-wrap — отображать предварительно отформатированный текст (код, ASCII-арт, отступы), где пробелы и переносы строк, набранные вами, должны сохраняться. Именно это поведение по умолчанию имеет элемент <pre>.
pre-line — сохранять переносы строк, написанные в источнике, при этом по-прежнему схлопывая лишние пробелы — удобно для адресов или коротких многострочных сообщений, хранящихся в виде простого текста.

Если ваша цель — переносить длинные неразрывные слова (например, URL) вместо управления пробелами в источнике, используйте overflow-wrap или word-break.

Поведение каждого значения

Таблица ниже суммирует, как каждое значение обрабатывает переносы строк, пробелы и табуляции, а также перенос текста.

Значение	Новые строки	Пробелы и табуляции	Перенос текста
`normal`	Схлопываются	Схлопываются	Переносится
`nowrap`	Схлопываются	Схлопываются	Не переносится
`pre`	Сохраняются	Сохраняются	Не переносится
`pre-wrap`	Сохраняются	Сохраняются	Переносится
`pre-line`	Сохраняются	Схлопываются	Переносится
`break-spaces`	Сохраняются	Сохраняются	Переносится (в том числе после каждого пробела)

Начальное значение	normal
Применяется к	Строчным элементам и ячейкам таблиц, а также к ::first-letter и ::first-line.
Наследуется	Нет.
Анимируется	Да. Свойство white-space поддерживает анимацию.
Версия	CSS1
DOM-синтаксис	object.style.whiteSpace = "nowrap";

Синтаксис

Синтаксис CSS-свойства white-space

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

Пример свойства white-space со значением "normal"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: normal;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Попробуйте сами »

Результат

При значении normal серии пробелов в исходном коде схлопываются до одного пробела, а текст переносится на новую строку, когда достигает края <div>.

Пример свойства white-space со значением "nowrap"

При значении nowrap пробелы в тексте также схлопываются, но перенос строк не происходит никогда. Текст выходит за пределы контейнера, а не переносится на следующую строку, что обычно вызывает горизонтальное переполнение (часто в сочетании с text-overflow для добавления многоточия).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Попробуйте сами »

Пример свойства white-space со значением "pre-line"

При значении pre-line последовательности пробелов по-прежнему схлопываются до одного, но переносы строк, написанные в исходном HTML-коде, сохраняются, а текст продолжает переноситься по мере необходимости.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Попробуйте сами »

В следующем примере вы можете увидеть разницу между значениями nowrap, normal и pre-wrap рядом друг с другом.

Пример свойства white-space с тремя значениями

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.t1 {
        white-space: nowrap;
      }
      p.t2 {
        white-space: normal;
      }
      p.t3 {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <h3>white-space: nowrap;</h3>
    <p class="t1">
      Lorem Ipsum is dummy text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: normal;</h3>
    <p class="t2">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: pre-wrap;</h3>
    <p class="t3">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание	Попробовать
normal	Переносит строки по мере необходимости для заполнения строчных блоков. Это значение по умолчанию.	Попробовать »
nowrap	При этом значении текст никогда не переносится на следующую строку.	Попробовать »
pre	Сохраняет пробелы и переносы строк. Текст не переносится на следующую строку.	Попробовать »
pre-line	Последовательности пробелов схлопываются до одного. Текст переносится при необходимости и на переносах строк.	Попробовать »
pre-wrap	Пробелы сохраняются браузером. Текст переносится при необходимости и на переносах строк.	Попробовать »
break-spaces	То же поведение, что и у "pre-wrap", за исключением: любая последовательность сохранённых пробелов всегда занимает место (в том числе в конце строки), после каждого сохранённого пробельного символа есть возможность разрыва строки, а эти пробелы влияют на внутренний размер блока вместо того, чтобы «висеть» за его краем.	Попробовать »
initial	Устанавливает для свойства значение по умолчанию.	Попробовать »
inherit	Наследует значение свойства от родительского элемента.

Связанные свойства

overflow-wrap и word-break — управляют переносом длинных неразрывных строк.
text-overflow — используется вместе с white-space: nowrap для обрезки текста с многоточием.
word-wrap — устаревший псевдоним для overflow-wrap.
overflow — определяет, что происходит с содержимым, выходящим за пределы контейнера, когда оно не переносится.

Практика

Каковы некоторые свойства значения 'white-space' в CSS?

Применяется к строчным блокам.Позволяет управлять пробельными символами в тексте.Не влияет на пробелы, переносы строк и другие виды пробельных символов.Может принимать значения 'normal', 'nowrap', 'pre', 'pre-wrap' и 'pre-line'.Влияет на цвет текста в CSS.