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

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

Пробелом может считаться последовательность разделителей или перенос строки.

Свойство white-space применяется к любому строчному контенту внутри элемента.

Дополнительно указанные пробелы будут показаны как один пробел, новые строки будут удалены. Строки при необходимости сворачиваются, чтобы поместиться в контейнере.

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      white-space: normal;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства white-space</h2>
    <div> Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба" . Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".  Lorem Ipsum - это текст-"рыба".</div>
  </body>
</html>

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

В следующем примере текст не переносится на следующую строку:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства white-space</h2>
    <div>Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".</div>
  </body>
</html>

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

Пример, где можно увидеть различие между значениями "nowrap", "normal" и "pre-wrap":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p.t1 {
      white-space: nowrap;
      }
      p.t2 {
      white-space: normal;
      }
      p.t3 {
      white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства white-space</h2>
    <h3>white-space: nowrap;</h3>
    <p class="t1">
      Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".
      Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".
      Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".
    </p>
    <h3>white-space: normal;</h3>
    <p class="t2">
      Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".
      Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".
      Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".
    </p>
    <h3>white-space: pre-line;</h3>
    <p class="t3">
       Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".
      Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".
      Lorem Ipsum - это текст-"рыба". Lorem Ipsum - это текст-"рыба".
    </p>
  </body>
</html>

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

Значения

Значение	Описание
normal	При необходимости строка переносится. Значение по умолчанию.
nowrap	Текст не переносится на следующую строку.
pre	Разрешает дополнительные пробелы перед первой буквой текста.
pre-line	Последовательность пробелов становится одним пробелом. Текст сворачивается при необходимости.
pre-wrap	Пробелы сохраняются браузером. Текст сворачивается при необходимости.
break-space	То же поведение, что при "pre-wrap", кроме следующих исключений: Любая последовательность сохраненных пробелов всегда заполняет пространство Есть возможность переноса строки после каждого сохраненного разделителя Такие сохраненные пробелы занимают пространство и не зависают, и таким образом влияют на встроенные размеры блока
initial	Устанавливает свойство в значение по умолчанию
inherit	Значение элемента наследуется от родительского элемента.