# Свойство white-space

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

У него есть два известных значения:
<ul>
<li>`white-space: normal` -- обычное поведение</li>
<li>`white-space: pre` -- текст ведёт себя, как будто оформлен в тег `pre`.</li>
</ul>

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

## pre / nowrap

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

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

**`pre`**:
<ul>
<li>**сохраняет пробелы**</li>
<li>**переносит текст при явном разрыве строки.**</li>
</ul>

**`nowrap`**
<ul>
<li>**не сохраняет пробелы**</li>
<li>**игнорирует явные разрывы строки (не переносит текст).**</li>
</ul>

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

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

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

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

<ul>
<li>**`white-space: pre`:**

[pre]
<div class="example" style="white-space:pre">if (hours > 18) {
    // Пойти поиграть в теннис
}
</div>
[/pre]

Здесь пробелы и переводы строк сохранены. В HTML этому значению `white-space` соответствует тег `PRE`.
</li>
<li>**`white-space: nowrap`:**

[pre]
<div class="example" style="white-space:nowrap">if (hours > 18) {
    // Пойти поиграть в теннис
} 
</div>
[/pre]

Здесь переводы строки проигнорированы, а подряд идущие пробелы, если присмотреться -- сжаты в один (например, перед комментарием `//`).
</li>
</ul> 

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

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

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

## pre-wrap/pre-line

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

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

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

<ul>
<li>**`white-space: pre-wrap`:**

[pre]
<div class="example" style="white-space:pre-wrap">if (hours > 18) {
    // Пойти поиграть в теннис
}
</div>
[/pre]
Отличный выбор для безопасной вставки кода посетителями.

</li>
<li>**`white-space: pre-line`:**

[pre]
<div class="example" style="white-space:pre-line">if (hours > 18) {
    // Пойти поиграть в теннис
} 
</div>
[/pre]

Сохранены переводы строк, ничего не вылезает, но пробелы интерпретированы в режиме обычного HTML.
</li>
</ul> 

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

<style>
/* not in HEAD, because of export */
.example {
  font-family: monospace; 
  width: 200px; 
  border: 1px solid black;
}
</style>