Как сделать так, чтобы текст не выходил за границы блока в HTML и CSS

В этой статье разбираются все способы предотвращения выхода текста за границы HTML-блока.

Мы рассмотрим CSS-свойства overflow, text-overflow, word-wrap, hyphens и мультистрочное сокращение с -webkit-line-clamp, а также их поддержку в браузерах.

Закроем такие вопросы:

1. Текст не выходит за границы блока
2. Обрезать текст css
3. Многоточие в css
4. Перенос длинных слов
5. text-overflow ellipsis
6. Многострочное сокращение текста
7. css overflow hidden
8. word-wrap break-word

Почему текст выходит за границы блока?

Текст может выходить за пределы блока по нескольким причинам:

• Слишком длинное слово без пробелов (например, URL).
• У блока фиксированная ширина, а текст не переносится.
• Используется white-space: nowrap, но нет обработки переполнения.

Чтобы это исправить, применяются CSS-свойства, контролирующие переполнение и перенос текста.

Основные способы ограничить текст в границах блока

Обрезка текста с overflow: hidden

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

[code lang="CSS"] .block { overflow: hidden; }[/code]

Плюсы:

• Простота реализации.
• Работает во всех браузерах.

Минусы:

• Текст обрезается резко, без индикации (нет ...).

Добавление многоточия (text-overflow: ellipsis)

Если нужно показать, что текст обрезан, используется text-overflow: ellipsis.

Обязательные условия:

• white-space: nowrap (запрет переноса строк).
• overflow: hidden.

[code lang="CSS"] .block { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [/code]

Пример:

[code lang="HTML"]

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

[/code]

Результат:

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

Поддержка браузерами:

• Работает везде, включая IE6+.

Перенос длинных слов (word-wrap, overflow-wrap)

Если текст содержит длинные слова (например, ссылки), они могут вылезать за границы.

Решение:

[code lang="CSS"].block { word-wrap: break-word; /* старый вариант */ overflow-wrap: break-word; /* современный вариант */ } [/code]

Разница между word-wrap и overflow-wrap:

• word-wrap — устаревшее, но работает везде.
• overflow-wrap — новый стандарт (предпочтительно).

Пример:

[code lang="HTML"]

НуоченьОченьДлинноеСловоБезПробелов

[/code]

Результат:

НуоченьОченьДлинноеСловоБезПробелов

Многострочное сокращение с -webkit-line-clamp

Если нужно ограничить текст в несколько строк и добавить ... в конце:

[code lang="CSS"].block { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* Макс. число строк */ overflow: hidden; }[/code]

Пример:

[code lang="HTML"]

Это очень длинный текст, который должен обрезаться после третьей строки и заканчиваться многоточием, если он не помещается.

[/code]

Результат:

Это очень длинный текст, который должен обрезаться после третьей строки и заканчиваться многоточием, если он не помещается.

Поддержка:

• Работает во всех современных браузерах, кроме IE.

Что делать, если ничего не помогло?

Если текст всё равно вылезает:

1. Проверьте, нет ли white-space: nowrap без overflow: hidden.
2. Убедитесь, что у блока задана width или max-width.
3. Если используется Flexbox/Grid, проверьте min-width: 0 у дочернего элемента.

Итог: какой способ выбрать?

Способы контроля текста в блоках

Способ	Когда использовать	Поддержка браузерами
overflow: hidden	Простая обрезка без ...	Все браузеры
text-overflow: ellipsis	Однострочный текст с ...	Все браузеры
word-wrap: break-word	Длинные слова (URL)	Все браузеры
hyphens: auto	Автопереносы (как в Word)	Firefox, Safari
-webkit-line-clamp	Многострочное сокращение	Все, кроме IE

Заключение

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

🧠 Итог: Если у вас есть вопросы или нужны уточнения — спрашивайте!