Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

white-space

Свойство CSS white-space указывает, каким образом обрабатывать пробелы и переводы строк в тексте элемента. По умолчанию браузеры игнорируют переносы строк указанные в HTML-коде и осуществляют их самостоятельно, только если строка не вмещается по ширине. Также они убирают и подряд идущие пробелы, оставляя только один. Используя свойство white-space можно изменить такое поведение браузера по отношению к тексту элемента.

Тип свойства

Назначение: текст.

Применяется: ко всем элементам.

Наследуется: да.

Значения

Значением свойства white-space является одно из ключевых слов задающих способ обработки пробелов и переводов строк.

  • normal — лишние пробелы убираются, а переводы строк игнорируются, браузер устанавливает их только там, где это необходимо, чтобы вместить текст в рамки элемента.
  • pre — браузер сохраняет все пробелы и переводы строк, присутствующие в исходном коде, поэтому строки определенной длины могут выйти за границы элемента. Это значение по своему действию очень похоже на тег <PRE>.
  • nowrap — лишние пробелы убираются, как при normal, а вот переводы строк запрещаются вовсе и текст отображается одной строкой, поэтому он может выйти за пределы элемента. Это значение по своему действию очень похоже на тег <NOBR>
  • pre-wrap — браузер сохраняет все пробелы и переводы строк, присутствующие в исходном коде, как при pre, но также может и сам дополнительно создавать обрывы строк, чтобы вместить содержимое.
  • pre-line — лишние пробелы убираются, как при normal, но сохраняются все переводы строк стоящие в исходном коде, а также браузер может дополнительно создавать обрывы строк, чтобы вместить содержимое.
  • inherit — наследует значение white-space от родительского элемента.

Процентная запись: не существует.

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

Чтобы избежать выхода содержимого за границы элемента при определенных значениях white-space, можно воспользоваться свойством overflow.

Синтаксис

white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit

Пример CSS: использование white-space

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство white-space</title>
  <style type="text/css">
   p {
    width: 300px; /* ширина параграфа */
    border: 2px green solid; /* стили рамки */
    white-space: nowrap; /* запрет перевода строки */
    padding: 5px; /* внутренние отступы */
   }
  </style>
 </head>
 <body>
  <p>Текст    отображается на одной строке,
     но лишние      пробелы     убраны.</p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS white-space.

Использование свойства CSS white-space

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноЧастичноЧастичноЧастичноЧастично

IE 6.0 и 7.0 не понимают значения inherit, pre-wrap и pre-line.

Firefox 2.0 не понимает значения pre-wrap и pre-line.

Firefox 3.0 и Opera 9.2 не понимают значение pre-line.

Для тега <TEXTAREA>:

IE 6.0 и 7.0 понимают значение pre и pre-line как pre-wrap.

IE 8.0 понимает значение pre как pre-wrap.

Chrome 2.0 и Safari до 4.0 включительно понимают все значения как pre-wrap.

Chrome 3.0 и выше и Safari 5.0 и выше понимают значение pre как pre-wrap, nowrap как pre, normal как pre-line.

Firefox понимает все значения, как pre-wrap.

Opera понимает значение nowrap как pre, а остальные значения как pre-wrap.

CSS по алфавиту
CSS по назначению