124 lines
4.5 KiB
Markdown
124 lines
4.5 KiB
Markdown
# Свойство white-space
|
||
|
||
Свойство `white-space` позволяет сохранять пробелы и переносы строк.
|
||
|
||
У него есть два известных значения:
|
||
<ul>
|
||
<li>`white-space: normal` -- обычное поведение</li>
|
||
<li>`white-space: pre` -- текст ведёт себя, как будто оформлен в тег `pre`.</li>
|
||
</ul>
|
||
|
||
Но браузеры поддерживают и другие, которые также бывают очень полезны.
|
||
[cut]
|
||
|
||
## pre / nowrap
|
||
|
||
Встречаем первую "сладкую парочку" -- `pre` и `nowrap`.
|
||
|
||
Оба этих значения меняют стандартное поведение HTML при работе с текстом:
|
||
|
||
**`pre`**:
|
||
<ul>
|
||
<li>Сохраняет пробелы.</li>
|
||
<li>Переносит текст при явном разрыве строки.</li>
|
||
</ul>
|
||
|
||
**`nowrap`**
|
||
<ul>
|
||
<li>Не сохраняет пробелы.</li>
|
||
<li>Игнорирует явные разрывы строки (не переносит текст).</li>
|
||
</ul>
|
||
|
||
Оба этих значения поддерживаются кросс-браузерно.
|
||
|
||
**Их основной недостаток -- текст может вылезти из контейнера.**
|
||
|
||
Для примера, рассмотрим следующий фрагмент кода:
|
||
|
||
```js
|
||
//+ no-beautify
|
||
if (hours > 18) {
|
||
// Пойти поиграть в теннис
|
||
}
|
||
```
|
||
|
||
**`white-space: pre`:**
|
||
|
||
```html
|
||
<!--+ autorun height=100 -->
|
||
<style>
|
||
div { font-family: monospace; width: 200px; border: 1px solid black; }
|
||
</style>
|
||
|
||
<div style="white-space:pre">if (hours > 18) {
|
||
// Пойти поиграть в теннис
|
||
}
|
||
</div>
|
||
```
|
||
|
||
Здесь пробелы и переводы строк сохранены. В HTML этому значению `white-space` соответствует тег `PRE`.
|
||
|
||
**`white-space: nowrap`:**
|
||
|
||
```html
|
||
<!--+ autorun height=100 -->
|
||
<style>
|
||
div { font-family: monospace; width: 200px; border: 1px solid black; }
|
||
</style>
|
||
|
||
<div style="white-space:nowrap">if (hours > 18) {
|
||
// Пойти поиграть в теннис
|
||
}
|
||
</div>
|
||
```
|
||
|
||
Здесь переводы строки проигнорированы, а подряд идущие пробелы, если присмотреться -- сжаты в один (например, перед комментарием `//`).
|
||
|
||
Допустим, мы хотим разрешить посетителям публиковать код на сайте, с сохранением разметки. Но тег `PRE` и описанные выше значения `white-space` для этого не подойдут!
|
||
|
||
Злой посетитель Василий Пупкин может написать такой текст, который вылезет из контейнера и поломает вёрстку страницы.
|
||
|
||
Можно скрыть вылезшее значение при помощи `overflow-x: hidden` или сделать так, чтобы была горизонтальная прокрутка, но, к счастью, есть другие значения `white-space`, специально для таких случаев.
|
||
|
||
## pre-wrap/pre-line
|
||
|
||
<dl>
|
||
<dt>`pre-wrap`</dt>
|
||
<dd>То же самое, что `pre`, но переводит строку, если текст вылезает из контейнера.</dd>
|
||
<dt>`pre-line`</dt>
|
||
<dd>То же самое, что `pre`, но переводит строку, если текст вылезает из контейнера и не сохраняет пробелы.</dd>
|
||
</dl>
|
||
|
||
Оба поведения отлично прослеживаются на примерах:
|
||
|
||
**`white-space: pre-wrap`:**
|
||
|
||
```html
|
||
<!--+ autorun height=100 -->
|
||
<style>
|
||
div { font-family: monospace; width: 200px; border: 1px solid black; }
|
||
</style>
|
||
|
||
<div style="white-space:pre-wrap">if (hours > 18) {
|
||
// Пойти поиграть в теннис
|
||
}
|
||
</div>
|
||
```
|
||
|
||
Отличный выбор для безопасной вставки кода посетителями.
|
||
|
||
**`white-space: pre-line`:**
|
||
|
||
```html
|
||
<!--+ autorun height=100 -->
|
||
<style>
|
||
div { font-family: monospace; width: 200px; border: 1px solid black; }
|
||
</style>
|
||
|
||
<div style="white-space:pre-line">if (hours > 18) {
|
||
// Пойти поиграть в теннис
|
||
}
|
||
</div>
|
||
```
|
||
|
||
Сохранены переводы строк, ничего не вылезает, но пробелы интерпретированы в режиме обычного HTML.
|