MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

white-space

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

/* Ключевые значения */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* Глобальные значения */
white-space: inherit;
white-space: initial;
white-space: unset;

Начальное значениеnormal
Применяется квсе элементы
Наследуетсяда
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Свойство white-space определяется, как одно ключевое слово, выбранное из списка значений, указанных ниже.

Значения

normal
Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы. 
nowrap
Объединяет последовательности пробелов в один пробел, как значение normal, но не переносит строки (оборачивание текста) внутри текста.
pre
Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы <br>.
pre-wrap
Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы <br>, и при необходимости для заполнения строчных боксов.
pre-line
Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам <br>, и при необходимости для заполнения строчных боксов..

В приведенной ниже таблице указано поведение различных значений свойства white-space:

  Новые строки Пробелы и табуляция Оборачивание текста
normal Объединяются в одну Объединяются в один пробел Оборачивается
nowrap Объединяются в одну Объединяются в один пробел Не оборачивается
pre Сохраняются как в источнике Сохраняются как в источнике Не оборачивается
pre-wrap Сохраняются как в источнике Сохраняются как в источнике Оборачивается
pre-line Сохраняются как в источнике Объединяются в один пробел Оборачивается

Формальный синтаксис

normal | pre | nowrap | pre-wrap | pre-line

Примеры

Основной пример

code { 
  white-space: pre; 
}

Перенос строк внутри элементов <pre> 

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
  white-space: pre-wrap;      /* текущие браузеры */
}

Посмотреть, как свойство действует

Источник:

    <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS+Результат:

Спецификации

Спецификация Статус Комментарий
CSS Text Module Level 3
Определение 'white-space' в этой спецификации.
Рабочий черновик Уточняется алгоритм переноса строк.
CSS Level 2 (Revision 1)
Определение 'white-space' в этой спецификации.
Рекомендация Первоначальное определение

Браузерная совместимость

                 
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (normal and nowrap) 1.0 (Да) 1.0 (1.7 или ранее) 5.5[1] 4.0 1.0 (85)
pre 1.0 (Да) 1.0 6.0 4.0 1.0 (85)
pre-wrap 1.0 (Да) 1.0 (1.7 или ранее)-moz
3.0 (1.9)
8.0 8.0 3.0 (522)
pre-line 1.0 (Да) 3.5 (1.9.1) 8.0 9.5 3.0 (522)
Support on <textarea> 1.0 ? 36 (36) 5.5 4.0 1.0 (85)
     
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Да) ? ? ? ?

[1] Internet Explorer 5.5+ supports word-wrap: break-word;.

Метки документа и участники

 Внесли вклад в эту страницу: coshturnina
 Обновлялась последний раз: coshturnina,