Какие особенности пробелов в HTML?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

HTML игнорирует повторяющиеся пробелы и переносы строк, отображая их как один пробел. Исключение — содержимое внутри тегов <pre> или элементов со стилем white-space: pre;, где пробелы и переносы сохраняются.

Неразрывный пробел   используется для предотвращения разрыва строки между словами и обеспечения видимости последовательных пробелов.

Таблица поведения white-space:

Значение	Описание
`normal`	Последовательные пробелы и переносы схлопываются до одного пробела. Текст переносится по необходимости.
`nowrap`	Последовательные пробелы и переносы схлопываются до одного пробела. Текст не переносится.
`pre`	Последовательные пробелы и переносы сохраняются. Текст переносится только по символам новой строки.
`pre-wrap`	Последовательные пробелы сохраняются. Текст переносится по символам новой строки и по необходимости.
`pre-line`	Последовательные пробелы схлопываются до одного. Переносы сохраняются. Текст переносится по необходимости.

Пример использования неразрывного пробела:

<!-- Дополнительный пробел между словами, который будет отображен -->
<p>Это обычный&nbsp;&nbsp;&nbsp; текст.</p>
<!-- Предотвращение разрыва строки -->
<p>Дата: 12&nbsp;октября</p>

Пример использования <pre> тега:

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

Пример использования CSS свойства white-space:

<div style="white-space: pre-wrap;">
  Этот текст сохранит пробелы
      и перенесется
  по необходимости.
</div>