122 lines
No EOL
4.6 KiB
Markdown
122 lines
No EOL
4.6 KiB
Markdown
# Свойство 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> |