Ответ
Для сохранения пробелов в разметке используй CSS-свойство `white-space`.
**Основные значения:**
* `normal` (по умолчанию) – пробелы схлопываются.
* `pre` – сохраняет все пробелы и переносы, как в исходном коде.
* `nowrap` – схлопывает пробелы, но запрещает перенос строк.
* `pre-wrap` – сохраняет пробелы и переносы, но добавляет автоматические переносы строк.
* `pre-line` – схлопывает пробелы, но сохраняет переносы строк.
**Пример:**
```
.whitespace-example {
white-space: pre;
}
```
**Когда использовать:**
* Для отображения кода (`
`, ``).
* Для текста с форматированием (например, стихи).
* Если важно точное расположение текста. Ответ 18+ 🔞
Ну, слушай, вот есть у тебя текст, и ты его на сайт пихаешь. А он, сука, как обезьяна с гранатой — все пробелы поудалял, переносы строк пообъединял, и получилась одна сплошная каша, блядь. Удивление пиздец, правда? Ты ж думал, что два пробела после точки — это красиво, а браузер тебе: «Да похуй, мудила, один будет!».
Так вот, чтобы эта мартышлюшка не вытворяла, есть у CSS такое волшебное свойство — `white-space`. Оно, как строгий папаша, говорит браузеру: «Э, сабака сука, э бошка думай! Тут пробелы священны, не тронь!».
**Основные значения, которые тебе надо знать, чтобы не облажаться:**
* `normal` (стоит по умолчанию) – классика. Все лишние пробелы и переносы схлопываются в один, текст переносится сам. Обычный режим для абзацев.
* `pre` – вот это, блядь, мощь! Сохраняет ВСЁ: и пробелы, и табы, и переносы строк — ровно так, как ты написал в коде. Как в теге `
`. Но если строка длинная, она уедет за экран, и будет горизонтальный скролл, ебать мои старые костыли.
* `nowrap` – схлопывает пробелы, но НИКАКИХ переносов строк! Текст будет идти одной строкой, пока не кончится. Полезно для заголовков или чтобы запретить разрыв.
* `pre-wrap` – золотая середина, ёпта! Сохраняет и пробелы, и переносы из кода, НО если строка не влезает, браузер её сам аккуратненько перенесёт. Удобно, практично, не пиздец.
* `pre-line` – хитрая жопа. Пробелы схлопывает (два пробела подряд не сохранит), но переносы строк из кода — оставляет. И сам при необходимости переносит.
**Пример, чтобы вообще всё стало ясно:**
Вот смотри, как это в деле выглядит. Блок кода не трогаю, как договаривались.
```css
.whitespace-example {
white-space: pre; /* Теперь тут всё будет, как в монастырской рукописи */
}
```
**Когда это воткнуть, чтобы не быть полупидором:**
* Для отображения программерского кода (внутри ``, ``). Без этого — нихуя не понятно.
* Для стихов, песен, писем — где важен вид, а не только содержание. Чтоб строфы не слипались.
* Везде, где критично точное расположение текста. Например, ASCII-арт какой-нибудь. Без `pre` это будет просто набор символов, а не рисунок.
Короче, `white-space` — это твой инструмент, чтобы сказать браузеру: «Вот тут, блядь, не выёбывайся, оставь всё как есть». Главное — применять с умом, а не просто так, от хуйни.