Как работает white-space: nowrap и в каких случаях применяется?

Как работает white-space: nowrap

Свойство white-space управляет обработкой пробелов и переносов строк в тексте. Значение nowrap запрещает браузеру автоматически переносить текст на новую строку при достижении границы родительского элемента. Весь текст остаётся на одной строке, игнорируя обычные переносы по словам. Принудительные разрывы строк (например, через <br> или символ новой строки в HTML) всё равно работают.

Где применяется

• Кнопки и ссылки в навигации — чтобы текст не разрывался на две строки.
• Заголовки и подписи, где важно сохранить целостность фразы.
• Ячейки таблиц, особенно с фиксированной шириной, чтобы избежать некрасивого переноса.
• Элементы с многоточием (text-overflow: ellipsis) — nowrap обязателен для работы этого эффекта.

Пример кода

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 150px;
  border: 1px solid #ccc;
}

<div class="no-wrap">Очень длинный текст, который не должен переноситься</div>

В этом примере текст обрезается и добавляется многоточие, если не помещается в 150px. Без nowrap текст бы перенёсся на следующую строку.

Вывод

Используйте white-space: nowrap, когда нужно гарантировать, что текст останется на одной строке — например, в компактных интерфейсах, таблицах или при создании эффекта многоточия. Однако помните о возможном переполнении контейнера и комбинируйте с overflow при необходимости.