Сводка по переносу и обрезанию текста

Для демонстрации примеров будет использоваться элемент:

<p class="element">
  В докладе о роли науки для общества упоминались исследования политетрафторэтилена и тетраэтилортосиликата
</p>

overflow-wrap

Позволяет браузеру разрывать длинные непрерывные токены, чтобы избежать переполнения контейнера.

⚠️ В старых статьях можно встретить устаревшее свойство word-wrap: break-word. Если у вас такое встретилось в коде – замена на overflow-wrap: break-word сохранит аналогичное поведение.

anywhere и break-word

.element { overflow-wrap: anywhere; }

.element { overflow-wrap: break-word; }

Разрешает разрывать слово в любом месте, если нужно предотвратить переполнение. При использовании с width: min-content, anywhere не будет расширять блок больше минимального размера.

anywhere

политетрафторэтилен

break-word

политетрафторэтилен

text-wrap

nowrap

Отключает автоматические переносы, но учитывает явно указанные \n переносы.

.element { text-wrap: nowrap; }

В докладе о роли науки для общества упоминались исследования политетрафторэтилена и тетраэтилортосиликата

balance

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

.element { text-wrap: balance; }

⚠️ Подсчет символов и балансирование строк является ресурсоемким процессом и работает только для текстов не длиннее 6 строк. Текст примера сокращен.

До

В докладе о роли науки для общества упоминались исследования

После

В докладе о роли науки для общества упоминались исследования

word-break

Разбивает текст всегда между любыми символами.

⚠️ В большинстве случаев сильно затрудняет восприятие и лучше использовать overflow-wrap: anywhere.

.element { word-break: break-all; }

В докладе о роли науки для общества упоминались исследования политетрафторэтилена и тетраэтилортосиликата

white-space и text-overflow

• white-space
• text-overflow

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

Используется в сочетании с overflow: hidden + text-overflow: ellipsis. В других сценариях white-space почти не применяется.

.element {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

В докладе о роли науки для общества упоминались исследования политетрафторэтилена и тетраэтилортосиликата

Многострочная обрезка с троеточием

Аналогичный подход для многострочного текста.

.element {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

В докладе о роли науки для общества упоминались исследования политетрафторэтилена и тетраэтилортосиликата

Форматирование пробелов с white-space

Не относится к переносу слов, но полезно при форматировании переносов между словами.

pre

Сохранение всех пробелов и переносов как в исходнике. Строки не будут перенесены автоматически — текст будет вылезать за границы блока.

.element { white-space: pre; }

В докладе о роли науки для общества упоминались исследования политетрафторэтилена и тетраэтилортосиликата

pre-wrap

Сохранение всех пробелов и переносов как в исходнике. Строки будут перенесены автоматически, если строка не помещается в контейнер.

.element { white-space: pre-wrap; }

{ "id": 123, "name": "Bob", "roles": [ "user" ], "settings": { "theme": "dark" } }

pre-line

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

.element { white-space: pre-line; }

{ "id": 123, "name": "Bob", "roles": [ "user" ], "settings": { "theme": "dark" } }

Итог

• Длинные слова, URL и токены без пробелов — используйте overflow-wrap: anywhere.
• Устаревший код с word-wrap: break-word замените на overflow-wrap: break-word.
• Если требуется строгое сохранение пробелов и переносов, например для блоков кода, используйте white-space: pre-wrap.
• Если переносы были расставлены вручную, но нужно склеить повторяющиеся пробелы, используйте white-space: pre-line.
• Для обрезания текста с троеточием — white-space: nowrap + overflow: hidden + text-overflow: ellipsis.
• Балансирование текста на строке — text-wrap: balance, но только для коротких текстов.