Как сделать чтобы все пробелы из разметки учитывались в браузере?

Сохранение пробелов из HTML разметки

По умолчанию браузер нормализует пробелы в HTML: несколько пробелов, табуляции и переносы строк сжимаются в один пробел. Это называется whitespace collapsing. Есть несколько способов это изменить.

Проблема: whitespace collapsing

<!-- HTML разметка -->
<p>
  Это    текст
  с    пробелами
</p>

<!-- Что видит браузер -->
Это текст с пробелами
<!-- Все лишние пробелы и переносы строк удалены! -->

Решение 1: CSS свойство white-space

Это самое мощное и гибкое решение. Свойство white-space контролирует обработку пробелов.

white-space: pre

Сохраняет ВСЕ пробелы и переносы строк (как в pre-элементе):

<style>
  .preserve-whitespace {
    white-space: pre;
  }
</style>

<p class="preserve-whitespace">
Это    текст
с    пробелами
и переносами
</p>

<!-- Результат: сохранены ВСЕ пробелы и переносы -->

white-space: pre-wrap

Сохраняет пробелы И автоматически переносит строки при переполнении контейнера:

<style>
  .preserve-with-wrap {
    white-space: pre-wrap;
  }
</style>

<p class="preserve-with-wrap">
Это очень длинный текст    с пробелами
который может быть перенесён если не влезает в контейнер
</p>

<!-- Пробелы сохранены, но строка может переноситься -->

white-space: pre-line

Сохраняет переносы строк, но сжимает пробелы:

<style>
  .preserve-lines {
    white-space: pre-line;
  }
</style>

<p class="preserve-lines">
Переносы    строк
сохранены, но    пробелы    сжаты
</p>

<!-- Результат:
Переносы строк
сохранены, но пробелы сжаты
-->

Полная таблица white-space

Практические примеры

Пример 1: Форматированный код

<style>
  code {
    white-space: pre;
    background: #f0f0f0;
    padding: 10px;
    display: block;
    font-family: monospace;
  }
</style>

<code>
  function hello() {
    console.log('Hello');
  }
</code>

<!-- Отступы сохранены! -->

Пример 2: ASCII art

<style>
  .ascii-art {
    white-space: pre;
    font-family: monospace;
  }
</style>

<div class="ascii-art">
   ___
  /   \
 | o o |
  \ ^ /
   |_|
</div>

<!-- ASCII артинка отобразится правильно -->

Пример 3: Письмо с форматированием

<style>
  .letter {
    white-space: pre-wrap;
    font-family: monospace;
    line-height: 1.5;
  }
</style>

<div class="letter">
Дорогой    коллега,

  Это письмо содержит
  отступы    и переносы.
  
С уважением,
  Ваше имя
</div>

<!-- Форматирование сохранено -->

Решение 2: HTML тег pre

Тег <pre> (preformatted text) по умолчанию применяет white-space: pre:

<pre>
Это    текст
с пробелами
и переносами
</pre>

<!-- Все пробелы и переносы сохранены! -->

Вариант с кодом:

<pre><code>
function greet(name) {
  return `Hello, ${name}`;
}
</code></pre>

Решение 3: HTML сущности

Для одного пробела можно использовать   (non-breaking space):

<!-- Один пробел -->
Это&nbsp;обычный&nbsp;пробел

<!-- Несколько пробелов -->
Это&nbsp;&nbsp;&nbsp;три&nbsp;пробела

Это неудобно, если много пробелов. Лучше использовать CSS.

Решение 4: Flexbox / Grid с word-spacing

Для особых случаев можно контролировать расстояние между словами:

<style>
  .spaced {
    word-spacing: 20px; /* расстояние между словами -->
  }
</style>

<p class="spaced">
Это   текст   с   большим   расстоянием
</p>

<!-- Слова отодвинуты друг от друга -->

Решение 5: Display: inline-block с width

Для сохранения пробелов в строчных элементах:

<style>
  span {
    display: inline-block;
    white-space: pre;
  }
</style>

<span>Это    текст</span> и остальное

<!-- В span пробелы сохранены -->

Особые случаи

Переносы строк в JSX/React

// ПЛОХО: переносы строк сжимаются
function Description() {
  return (
    <p>
      Строка   1
      Строка   2
    </p>
  );
}

// ХОРОШО: используй white-space: pre-wrap
function Description() {
  return (
    <p style={{ whiteSpace: 'pre-wrap' }}>
      Строка   1
      Строка   2
    </p>
  );
}

// ИЛИ используй pre элемент
function Description() {
  return (
    <pre>
      Строка   1
      Строка   2
    </pre>
  );
}

Копипаста кода

<style>
  .code-block {
    white-space: pre-wrap;
    overflow-x: auto; /* горизонтальная прокрутка для длинных строк -->
    background: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
  }
</style>

<div class="code-block">
function example() {
  const obj = {
    name: 'John',
    email: 'john@example.com'
  };
}
</div>

Сравнение подходов

Best Practices

1. Используй white-space: pre для кода

code, pre {
  white-space: pre-wrap;
  overflow-x: auto;
}

1. Для обычного текста с пробелами — white-space: pre-line

.formatted-text {
  white-space: pre-line; /* сохраняет переносы, но сжимает пробелы -->
}

1. Для ASCII art или монопространных шрифтов — white-space: pre

.ascii {
  white-space: pre;
  font-family: monospace;
}

1. Всегда добавляй overflow-x: auto для длинного кода

pre {
  white-space: pre-wrap;
  overflow-x: auto;
  max-width: 100%;
}

Итог

Чтобы сохранить пробелы из разметки:

1. CSS свойство white-space — самое мощное решение

   • white-space: pre — сохраняет всё
   • white-space: pre-wrap — сохраняет с переносом слов
   • white-space: pre-line — сохраняет переносы строк

2. HTML элемент <pre> — встроенное решение

3. Комбинируй с font-family: monospace для кода

4. Помни о переполнении — добавляй overflow-x: auto