Текст выходит за границы блока, если ему не хватает места, а браузер не переносит его сам. Например, у блока фиксированная ширина или в тексте есть длинное слово без пробелов. Исправляется это несколькими CSS-свойствами: overflow скрывает лишнее, text-overflow добавляет многоточие, overflow-wrap переносит длинные слова, а -webkit-line-clamp обрезает текст сразу по нескольким строкам.
В статье:
- Почему текст выходит за границы блока
- Обрезка текста с overflow: hidden
- Многоточие: text-overflow: ellipsis
- Перенос длинных слов: overflow-wrap и word-wrap
- Автоматические переносы: hyphens: auto
- Многострочное сокращение: -webkit-line-clamp
- Отдельный случай: ellipsis не работает во Flexbox и Grid
- Сравнение способов
- Вопросы и ответы
Почему текст выходит за границы блока
Обычно это одна из трёх причин:
- В тексте есть слишком длинное слово без пробелов - например, ссылка или email.
- У блока задана фиксированная ширина, а браузер не переносит строки сам.
- Стоит
white-space: nowrap, который запрещает перенос строк вообще, а обработки переполнения для этого случая нет.
Дальше - конкретные CSS-свойства для каждого случая.
Обрезка текста с overflow: hidden
Самый простой способ - скрыть часть текста, которая не помещается в блок.
.block {
overflow: hidden;
}Плюс: работает во всех браузерах и требует одну строку кода. Минус: текст обрезается резко, без индикации, что часть текста скрыта - читатель может не понять, что видит не весь текст.
Пример: как работает overflow: hidden
Обратите внимание: текст просто обрывается на границе блока, без каких-либо точек или других знаков - именно поэтому читатель может не понять, что часть текста скрыта. Ниже - способ показать это явно.
Многоточие: text-overflow: ellipsis
Чтобы показать, что текст обрезан, добавляют многоточие. У свойства два обязательных условия - без них оно не сработает: должен быть запрещён перенос строк (white-space: nowrap) и включена обрезка (overflow: hidden).
.block {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Пример: как работает text-overflow: ellipsis
text-overflow: ellipsis работает во всех современных браузерах, включая старые версии Internet Explorer - это одно из самых надёжных CSS-свойств на этой странице. Единственное ограничение: оно обрезает текст только в одну строку. Для нескольких строк нужен другой приём - см. ниже про -webkit-line-clamp.
Перенос длинных слов: overflow-wrap и word-wrap
Если в тексте есть длинное слово без пробелов - ссылка, email, артикул товара - оно может вылезти за границы блока, даже если весь остальной текст переносится нормально.
.block {
overflow-wrap: break-word; /* современное название свойства */
word-wrap: break-word; /* старое название, работает как псевдоним */
}overflow-wrap и word-wrap - это одно и то же свойство под двумя именами: word-wrap появился раньше как расширение Microsoft, а overflow-wrap - его официальное название в текущей спецификации CSS Text Module. Писать можно любое из двух, работать будет одинаково, но лучше overflow-wrap - это актуальное имя.
Пример: как overflow-wrap переносит длинное слово
Не путайте overflow-wrap с похожим по названию word-break: break-all - это разные свойства. overflow-wrap: break-word разбивает слово, только если оно иначе не поместится на строке целиком. word-break: break-all разбивает слова гораздо агрессивнее - в любом месте, где не хватает места, даже если слово в принципе могло бы поместиться на следующей строке. Для обычного текста почти всегда нужен именно overflow-wrap.
Автоматические переносы: hyphens: auto
Ещё один способ обойтись без обрезки - включить переносы по слогам, как в текстовом редакторе.
.block {
hyphens: auto;
}Свойство работает только если у страницы или блока указан язык через атрибут lang (например, lang="ru" на теге html) - без него браузер не знает правил переноса для нужного языка. Поддержка широкая - Chrome, Firefox, Safari и Edge понимают это свойство уже много лет, можно использовать без опаски.
Пример: как hyphens: auto переносит слово по слогам
В отличие от предыдущих способов, здесь текст не теряется и не обрезается - он весь остаётся на месте, просто аккуратно переносится по слогам вместо некрасивого пустого хвоста в конце строки.
Многострочное сокращение: -webkit-line-clamp
Если нужно ограничить не одну строку, а несколько - например, показать три строки описания товара и обрезать остальное многоточием:
.block {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* сколько строк показать */
overflow: hidden;
}Пример: как -webkit-line-clamp обрезает текст после третьей строки
Название с приставкой -webkit- и правило -webkit-box-orient выглядят устаревшими, но это специально: несмотря на пометку "нестандартное", браузеры обязаны поддерживать именно эту связку трёх свойств вместе, и она работает практически везде, кроме старых версий IE. Существует и новое, не префиксованное свойство line-clamp, которое можно применять к обычному блоку без -webkit-box, но оно пока не поддерживается всеми основными браузерами одинаково - для реального проекта на 2026 год надёжнее использовать проверенную -webkit- версию.
Отдельный случай: ellipsis не работает во Flexbox и Grid
Частая ситуация: text-overflow: ellipsis добавлен, но текст всё равно вылезает за пределы блока, если этот блок - дочерний элемент flex-контейнера или CSS Grid.
Причина в самой спецификации: у flex- и grid-элементов по умолчанию есть неявный min-width: auto, который равен ширине содержимого - это защита от того, чтобы контент не вылезал за пределы контейнера при сжатии. Но именно это же правило мешает элементу сжаться настолько, чтобы сработала обрезка текста.
.flex-item {
min-width: 0; /* снимает защитное ограничение */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Добавление min-width: 0 (для Grid - min-width: 0 на элементе сетки) снимает это ограничение и позволяет элементу сжаться меньше ширины своего содержимого - тогда overflow и text-overflow начинают работать как обычно.
Пример: почему ellipsis не работает во Flexbox без min-width: 0
Без min-width: 0 - текст обрезается без многоточия
С min-width: 0 - работает правильно
Сравнение способов
| Способ | Когда использовать | Поддержка браузерами |
|---|---|---|
overflow: hidden |
Простая обрезка без многоточия | Все браузеры |
text-overflow: ellipsis |
Однострочный текст с многоточием | Все браузеры, включая старый IE |
overflow-wrap: break-word |
Длинные слова без пробелов (ссылки, email) | Все браузеры |
hyphens: auto |
Переносы по слогам вместо обрезки | Все современные браузеры (нужен атрибут lang) |
-webkit-line-clamp |
Многострочное сокращение с многоточием | Все, кроме старых IE |
Частые ошибки
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Указан только text-overflow: ellipsis | Многоточие не появляется | Добавить обязательные white-space: nowrap и overflow: hidden |
white-space: nowrap без overflow: hidden | Текст просто вылезает за блок одной длинной строкой | Добавить overflow: hidden или убрать nowrap |
| У блока не задана ширина | Обрезка не срабатывает, блоку некуда "не помещаться" | Задать width или max-width |
| ellipsis не работает внутри Flexbox/Grid | Текст вылезает, хотя все свойства на месте | Добавить min-width: 0 дочернему элементу |
Подробнее про базовое поведение overflow (visible, hidden, scroll, auto) - в уроке курса Overflow: что делать с содержимым, которое не помещается. Приёмы этой статьи - многоточие и построчная обрезка - его продолжение для случаев, когда просто спрятать содержимое недостаточно.
Вопросы и ответы
Почему text-overflow: ellipsis не работает?
Чаще всего не хватает одного из двух обязательных условий - white-space: nowrap или overflow: hidden. Без них свойство text-overflow ничего не делает, даже если оно указано.
Как сделать многоточие после нескольких строк, а не одной?
Через -webkit-line-clamp вместе с display: -webkit-box, -webkit-box-orient: vertical и overflow: hidden - только эта комбинация из четырёх свойств ограничивает текст заданным числом строк и добавляет многоточие в конце.
В чём разница между word-wrap и overflow-wrap?
Это одно и то же свойство под двумя именами. word-wrap - старое название, overflow-wrap - актуальное по спецификации. Работают одинаково, но лучше использовать overflow-wrap.
