Как запретить перенос текста
Короткий ответ
white-space: nowrap запрещает переносить текст на новую строку:
<button style="white-space: nowrap;">Add to cart</button>Это полезно для кнопок, цен и меток: «Add to» на одной строке и «cart» на другой смотрится плохо.
Только в одном месте
Чтобы склеить два слова, например число и единицу, вставьте между ними неразрывный пробел :
<p style="width: 150px; border: 1px solid silver;">Delivery takes about 5 days and the box weighs 12 kg</p>Ровные заголовки
Иногда нужно не запретить перенос, а сделать его красивее. text-wrap: balance выравнивает длину строк, чтобы в последней не осталось одно слово:
<h3 style="width: 260px; text-wrap: balance;">A long heading that would leave one lonely word</h3>Для абзацев есть text-wrap: pretty — он убирает одиночные слова в конце.
Частая ошибка
nowrap на длинном тексте: строка вылезает за блок и создаёт горизонтальную прокрутку. Если текст может быть длинным, добавьте обрезку многоточием через overflow: hidden и text-overflow: ellipsis.
Функции из этого ответа
- white-space — Что делать с пробелами и переносами строк из исходного кода и можно ли переносить строки.
- text-wrap — Как переносятся строки: обычно, с выравниванием длины или без одинокого слова в конце.
- overflow — Что делать с содержимым, которое не помещается в элемент.