White-space в CSS: полное руководство по переносу текста

Если вы когда-либо пытались вывести на экран стихи, ASCII-арт или комментарии пользователей, то наверняка уже сталкивались с поведением браузера: вы нажимаете Enter в HTML-разметке, а он делает вид, что ничего не произошло. Десять пробелов? Будет один. Абзац? Какой абзац?

Иногда бывает наоборот: подпись на кнопке вдруг переносится на вторую строку и рушит весь дизайн, а длинная ссылка разбивает мобильную вёрстку.

За всё это поведение отвечает CSS-свойство white-space. Сегодня разберём, как оно управляет пробелам, переносами и длинными строками.

Что такое white-space в CSS

В HTML любой текст по умолчанию ведёт себя как газетная колонка: неважно, сколько пробелов или пустых строк вы поставили в коде, — браузер склеит их в один-единственный пробел. И именно свойство white-space решает судьбу всех «невидимых» символов: обычных пробелов, табуляции и переносов строк.

По спецификации white-space — это сокращение, которое объединяет в себе сразу два механизма:

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

Чтобы всем этим управлять, разберёмся в самой команде: какие значения она принимает и что каждое из них делает.

Синтаксис свойства white-space

Пишется стандартно, как и любое другое свойство CSS. Принимает одно ключевое слово.

.box {
  white-space: normal;    /* Стандартное поведение */
  white-space: nowrap;    /* Запрет переносов строк */
  white-space: pre;       /* Как в теге <pre>: пробелы и переносы сохраняются */
  white-space: pre-wrap;  /* Сохраняем пробелы, строки переносим */
  white-space: pre-line;  /* Сохраняем Enter, но убиваем пробелы */
}

Есть ещё странность вроде break-spaces, но о ней поговорим позже.

Значения по умолчанию

Если вы не трогаете это свойство, браузер применяет значение white-space: normal. Это стандартный режим, к которому мы привыкли в вёрстке:

Это логично для обычного текста, но ужасно неудобно, если вы пытаетесь вывести на экран стихи, код, ASCII-арт или сообщения чата, где важна структура.

Основные значения white-space и их действие

Разберём пять важных значений. Каждое из них управляет двумя параметрами: пробелами внутри строки и переносами на границе блока.

👉 Важный момент: свойство white-space управляет только обычными пробелами, которые вы ставите клавишей Space. Если вы используете неразрывный пробел — спецсимвол   в HTML или Option+Space на Mac, — браузер считает его буквой, а не пустотой. Такие пробелы никогда не схлопываются, независимо от настроек CSS.

Если вы повторяете примеры из статьи в VS Code или другой IDE и у вас установлен плагин Prettier, он может автоматически удалять лишние пробелы при сохранении файла. Чтобы этого не произошло, на время экспериментов отключите форматирование или оберните текст в тег <pre> — внутри него редакторы обычно не трогают пробелы.

normal: стандартное поведение

Это значение по умолчанию. Браузер ведёт себя как редактор газеты: экономит место.

   .normal {
     white-space: normal;
   }

И вот как это выглядит в верстке:

Используется в 99% обычных текстов на сайтах. Статьи, новости, описания товаров — везде, где нам всё равно, как автор расставил отступы в исходном тексте.

nowrap: запрет переноса строк

Режим бесконечной строки. Текст выстраивается в одну линию и никогда не переносится, даже если он пробил край экрана и ушёл за горизонт. Единственное, что может его разорвать, — тег <br>. Все лишние пробелы убираются:

Где используется:

pre: сохранение пробелов и переносов

Работает ровно так же, как HTML-тег <pre>. Браузер говорит: «Я ничего не трогаю. Как ты написал в редакторе кода, так я и выведу».

Используется исключительно для вывода сниппетов кода или ASCII-арта. В обычном интерфейсе это опасно, так как ломает адаптивность.

pre-wrap: сохранение с автоматическим переносом

Это «умная» версия pre. Самое полезное свойство для контента, который создают пользователи.

Используется для оформления комментариев, чатов, отзывов. Представьте, что пользователь написал стих или отформатировал сообщение лесенкой. Если вы используете normal, всё превратится в кашу. Если pre — длинная строка порвёт дизайн. А вот pre-wrap сохранит красоту авторского форматирования, но аккуратно перенесёт текст на мобилке.

pre-line: игнорирование пробелов, сохранение переносов

Гибридный режим для тех, кто любит чистоту, но уважает абзацы.

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

Практическое применение white-space

Теория позади, теперь суровая реальность: на примерах посмотрим, где эти свойства спасают вёрстку от краха.

Когда использовать nowrap

Значение nowrap — это «клей» для текста. Оно запрещает перенос строки, даже если места не хватает.

Конечно, пуристы скажут: «Используйте неразрывный пробел   или прогоняйте текст через „Типограф“». И они правы: это семантически верный путь. Но в реальных приложениях данные часто прилетают с бэкенда грязными, а контент-менеджеры забывают про спецсимволы. Поэтому white-space: nowrap — это ваша CSS-страховка.

Представьте кнопку «Купить 🛒». Если контейнер сожмётся, при стандартных настройках вы получите перенос эмодзи на другую строку:

Выглядит плохо. Свойство white-space: nowrap гарантирует, что иконка всегда будет приклеена к тексту, а кнопка скорее расширится, чем развалится.

Другой кейс: карточки с балансом или ценами в узком сайдбаре:

Представим ситуацию: с бэкенда прилетает JSON с ценами. Это может быть голое число, которое мы форматируем на фронте, или уже готовая строка "15 000 ₽" с обычными пробелами. Писать JS-скрипт, который будет парсить каждую цену, искать знак валюты и заменять обычный пробел на неразрывный, — это муторно и попахивает костылём. Проще и надёжнее заставить CSS разобраться с этим глобально.

Сравним стили двух карточек:

/* Плохо */
.bad .amount {
  /* По умолчанию */
  white-space: normal; 
  color: #d63031;
}
/* Хорошо (с защитой) */
.good .amount {
  /* Запрещаем разрыв строки */
  white-space: nowrap; 
  color: #00b894;
  /* Если цена в миллиардах и не влезает вообще никак */
  overflow: hidden; 
  text-overflow: ellipsis; /* …поставим многоточие */
}

Выглядеть это будет так:

В первом варианте цифры на маленьком экране разрываются. Во втором варианте ответ бэкенда мы обернули в CSS-защиту: всё выглядит монолитно и данные отлично читаются. Если же карточка совсем перестанет влезать — она обрежется многоточием и не развалится на куски.

Примеры с pre и pre-wrap

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

Блок кода white-space: pre и проблема скролла

Когда вы верстаете блок с кодом, как на GitHub, то обязаны использовать pre, чтобы сохранить отступы. Но есть нюанс: код часто бывает длиннее экрана.

Просто задать white-space: pre будет ошибкой: на мобильном телефоне сайт разъедется в ширину. Поэтому всегда используйте это свойство в связке с прокруткой.

.code-block {
 /* Сохраняем структуру */
  white-space: pre;      
  /* Добавляем скролл, если текст длинный */
  overflow-x: auto;     
 /* Не даём блоку вылезти за экран */
  max-width: 100%;       
}

Сравним:

Без свойства overflow код внутри блока вылезает за границу. Добавляем нужное свойство — и код ровно вписывается в экран, а внизу появляется ползунок прокрутки.

Комментарии пользователей (white-space: pre-wrap) против <br>

Частая ошибка начинающих: получать текст от пользователя, где есть переносы строк \n, и пытаться заменить их на теги <br> через JavaScript или на бэкенде, чтобы сохранить абзацы. Это лишняя работа, нагрузка на процессор и риск XSS-уязвимостей.

Правильным решением будет просто положить текст в div и задать ему white-space: pre-wrap. Браузер сам превратит невидимые символы Enter в новые строки, сохранив при этом адаптивность. Это стандарт для чатов, отзывов и постов в соцсетях.

Допустим, мы делаем карточки с отзывами на товары. В одной карточке слева мы сделали всё как положено и добавили white-space: pre-wrap. Текст форматируется с отступами.

Карточка справа со стилем white-space: normal. Исходный текст с отступами Enter, но в вёрстке он схлопнулся:

С pre-wrap браузер сам превратит невидимые символы, которые добавил автор текста, в новые строки. А вот прописывать всё вручную через <br>, как мы уже сказали выше, плохая альтернатива.

Бонус: зачем нужен break-spaces?

В начале статьи мы упоминали экзотическое значение break-spaces. Оно работает почти как pre-wrap — сохраняет всё и переносит, но с одним хитрым различием: поведением пробелов в конце строки.

Посмотрите на гифку ниже. Мы имитируем веб-терминал, где пользователь ввёл текст Console > и зажал пробел — они обозначены синими прямоугольниками. А теперь начинаем сжимать контейнер:

Видите разницу?

Для обычной вёрстки статей это не нужно. Но если вы делаете онлайн-редактор кода или эмулятор терминала, это критично.

В обычном pre-wrap вы можете нажать пробел десять раз, но курсор на новой строке будет стоять в начале, и пользователь не поймёт: «Я же жму пробел, где отступ?» Свойство break-spaces чинит это поведение для онлайн-редакторов кода: пробелы реально занимают место и переносят каретку так, как вы ожидаете.

Перенос текста и слов в CSS

Свойство white-space управляет пробелами и переносами Enter. Но что делать, если пробелов нет?

Представьте, что пользователь прислал ссылку длиной в 200 символов или решил написать в отзыве «Аааааа...» на три страницы. Браузер по умолчанию считает это одним словом. И поскольку переносить его негде — пробелов-то нет, — это «слово» пробивает контейнер и улетает вправо, ломая всю вёрстку.

word-wrap и overflow-wrap

Это одно и то же свойство. Изначально Microsoft придумала word-wrap для IE, а остальным браузерам оно понравилось, и они его скопировали. Позже стандарты W3C переименовали его в более логичное overflow-wrap (перенос при переполнении). Но word-wrap работает до сих пор как псевдоним.

Это «вежливый» перенос. Значение overflow-wrap: break-word говорит браузеру:

Например, длинные ссылки из Google Maps — главный враг мобильной вёрстки. В ссылке нет пробелов, поэтому браузер считает её одним гигантским словом и растягивает контейнер.

Если мы оставим значение по умолчанию:

.message {
    /* По умолчанию */
     overflow-wrap: normal;
 }

то длинная ссылка пробьёт границу сообщения и уйдёт за пределы контейнера. В реальной жизни это создаст горизонтальный скролл.

Чтобы этого избежать, зададим свойство break-word, чтобы ссылка аккуратно разломилась на несколько строк:

Поэтому ставьте overflow-wrap: break-word для всех текстовых блоков с пользовательским контентом.

word-break для контроля переноса слов

Это агрессивный перенос. Свойство word-break решает, можно ли разрывать слово, даже если для него ещё есть место на строке, но не хватает для всего слова целиком.

Самое распространённое значение — word-break: break-all. Оно превращает текст в поток символов, и браузеру становится всё равно, где границы слов. Если слово «Энциклопедия» не влезает в конец строки, браузер может написать «Энцикл» на первой строке, а «опедия» — на второй.

К обычному тексту это свойство применять не нужно:

break-all в основном используется в технических данных, где нет понятий «слог» или «слово»: хеши транзакций, ключи шифрования, логи, генерируемые ссылки. Там, где важно заполнить пространство максимально плотно, не оставляя дыр справа:

hyphens для автоматической расстановки переносов

Если вы хотите, чтобы текст выглядел как в книжке — с красивыми дефисами при переносе, — то понадобится hyphens: auto. В отличие от предыдущих методов, которые просто рубят слова, hyphens ищет правильные слоги по словарю. В браузеры встроены специальные алгоритмы переносов, и они знают грамматические правила языка: где гласная, где согласная, как разбивать слоги.

Свойство hyphens идеально сочетается с выключкой по ширине text-align: justify, спасая текст от огромных дыр между словами, так называемых коридоров.

Важнейший момент: чтобы это работало, браузер должен знать, на каком языке написан текст. Вы обязаны указать атрибут lang в HTML:

Русский язык отлично поддерживается во всех браузерах. Алгоритмы справляются даже со сложными словами вроде «высокопревосходительство».

Но учтите, что Chrome, Safari и Firefox могут перенести одно и то же слово в разных местах, например «ма-ятник» или «маят-ник». Это нормально, так как по правилам оба варианта допустимы, а словари у браузеров разные.

Решение частых проблем с переносом текста

Знать свойства — это хорошо, но уметь собрать из них рабочий компонент — ещё лучше. Рассмотрим пару рецептов на те случаи, когда контент пытается сломать ваш дизайн.

Обрезка длинного текста с многоточием

Типичная задача: у вас есть карточка новости, и заголовок должен быть в одну строку. Если он длиннее — нужно поставить многоточие.

Для этого используется троица CSS-свойств, которые работают только вместе:

.truncate {
  /* Запрещаем перенос на вторую строку */
  white-space: nowrap;      
  /* Всё, что вылезло — скрываем */
  overflow: hidden;        
  /* В конце ставим многоточие */
  text-overflow: ellipsis;  
}

А если нужно две или три строки?Раньше для этого использовали страшные хаки. Сейчас же есть стандартное свойство, которое всё ещё требует префикса -webkit, но работает везде:

.multiline-truncate {
  display: -webkit-box;
  /* Сколько строк оставить */
  -webkit-line-clamp: 3;    
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Это идеальное решение для анонсов статей и описаний товаров.

Управление переносом в таблицах

Таблицы <table> — это государство в государстве, которые живут по своим законам физики. По умолчанию они резиновые (table-layout: auto) и стараются растянуться так, чтобы любой ценой уместить контент целиком.

Даже если вы жёстко зададите ячейке width: 100px, таблица проигнорирует это, если внутри лежит длинное слово без пробелов — она просто расширит колонку.

Допустим, мы верстаем таблицу пользователей, и у одного из пользователей очень длинный адрес почты:

Длинный имейл Марии растянул колонку и вытолкнул таблицу вправо. Это типичный горизонтальный скролл на сайте.

Обычные свойства обрезки в таблицах не работают, пока она резиновая. И чтобы всё это починить, таблицу нужно «заморозить» — то есть переключить алгоритм расчёта ширины с помощью table-layout: fixed. В этом режиме браузер перестаёт смотреть на содержимое ячеек и делит ширину строго по вашим правилам или поровну, если ширина не задана.

table {
  /* Таблица перестаёт быть резиновой и слушается ширины колонок */
 table-layout: fixed; 
  width: 100%;
}
td {
  /* Теперь тут сработает обрезка с многоточием */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Короче говоря, без table-layout: fixed ваши попытки обрезать текст в ячейках таблицы браузер проигнорирует. Он всегда отдаст приоритет полному отображению контента, даже ценой сломанной вёрстки.