Свойство white-space

Свойство white-space позволяет сохранять пробелы и переносы строк.

У него есть два известных значения:

`white-space: normal` -- обычное поведение
`white-space: pre` -- текст ведёт себя, как будто оформлен в тег `pre`.

Но браузеры поддерживают ещё 3, два из которых -- только в IE8+ и очень полезны. [cut]

pre / nowrap

Встречаем первую "сладкую парочку" -- pre и nowrap.

Оба этих значения меняют стандартное поведение HTML при работе с текстом:

pre:

**сохраняет пробелы**
**переносит текст при явном разрыве строки.**

nowrap

**не сохраняет пробелы**
**игнорирует явные разрывы строки (не переносит текст).**

Оба этих значения поддерживаются кросс-браузерно.

Их основной недостаток -- текст вылезает из контейнера.

Для примера, рассмотрим следующий фрагмент кода:

if (hours > 18) {
    // Пойти поиграть в теннис
}

**`white-space: pre`:**
[pre]

if (hours > 18) { // Пойти поиграть в теннис }
[/pre]
Здесь пробелы и переводы строк сохранены. В HTML этому значению white-space соответствует тег PRE.
**`white-space: nowrap`:**
[pre]

if (hours > 18) { // Пойти поиграть в теннис }
[/pre]
Здесь переводы строки проигнорированы, а подряд идущие пробелы, если присмотреться -- сжаты в один (например, перед комментарием //).

Допустим, мы хотим разрешить посетителям публиковать код на сайте, с сохранением разметки. Но тег PRE и описанные выше значения white-space для этого не подойдут!

Злой Василий Пупкин может написать такой текст, который вылезет из контейнера и поломает вёрстку страницы.

Можно скрыть вылезшее значение при помощи overflow-x: hidden или сделать так, чтобы была горизонтальная прокрутка, но, к счастью, есть другие значения white-space, специально для таких случаев.

pre-wrap/pre-line

Эти значения не поддерживаются в IE7-.

`pre-wrap`: То же самое, что `pre`, но переводит строку, если текст вылезает из контейнера.
`pre-line`: То же самое, что `pre`, но переводит строку, если текст вылезает из контейнера и не сохраняет пробелы.

Оба поведения отлично прослеживаются на примерах:

**`white-space: pre-wrap`:**
[pre]

if (hours > 18) { // Пойти поиграть в теннис }
[/pre] Отличный выбор для безопасной вставки кода посетителями.
**`white-space: pre-line`:**
[pre]

if (hours > 18) { // Пойти поиграть в теннис }
[/pre]
Сохранены переводы строк, ничего не вылезает, но пробелы интерпретированы в режиме обычного HTML.

Никто не мешает использовать эти значения на сайте, а для IE7- игнорировать проблему или задавать контейнеру overflow-x: hidden.

4.6 KiB Raw Blame History Unescape Escape

Свойство white-space

pre / nowrap

pre-wrap/pre-line

4.6 KiB

Raw Blame History