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 Значение элемента наследуется от родительского элемента.

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

1.0+ 12.0+ 1.0+ 1.0+ 4.0+


Считаете ли это полезным?

Похожие статьи