Свойство white-space: пробелы и переносы
Как разрешать перенос, сохранять форматирование и избегать неожиданного переполнения.
Как это работает
white-space управляет обработкой пробелов и возможностью переноса строк. При normal последовательности пробелов обычно схлопываются и текст переносится. nowrap сохраняет обычное схлопывание, но запрещает перенос по доступным точкам.
pre сохраняет пробелы и явные переносы без обычного автоматического переноса, а pre-wrap сочетает сохранение форматирования с переносом по ширине. Выбор зависит от задачи: для исходного кода важны отступы, для длинного сообщения — ещё и удобство чтения на телефоне.
Пример в интерфейсе
.message { white-space: pre-wrap; max-width: 280px; padding: 16px; background: #eaf4ee; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| normal | Обычный текст с переносами. |
| nowrap | Без обычных переносов. |
| pre | Сохранение форматирования без автоматического переноса. |
| pre-wrap | Сохранение форматирования с переносом. |
На что обратить внимание
Не задавайте nowrap всему контейнеру с длинными подписями. Унаследованный запрет переноса может растянуть страницу далеко за экран.
Проверьте на практике
Вставьте в пример два пробела и перевод строки. Переключите normal и pre-wrap и сравните оба вида пробельных символов.
Связанные темы: text-overflow, overflow-wrap.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.