Как исправить вылезающий за пределы страницы текст при помощи overflow hidden

Чтобы предотвратить вылезание текста за пределы контейнера, можно использовать overflow: hidden. Это свойство обрезает контент, выходящий за границы элемента.

Пример:

.container {
  width: 300px;
  white-space: nowrap; /* Запрещаем перенос строк */
  overflow: hidden;    /* Обрезаем выходящий за границы текст */
  text-overflow: ellipsis; /* Добавляем многоточие (...) */
}

Нюансы:

• overflow: hidden скрывает контент без возможности прокрутки.
• Для однострочного текста добавь white-space: nowrap и text-overflow: ellipsis, чтобы показать многоточие.
• Для многострочного текста используй -webkit-line-clamp (с ограниченной поддержкой браузеров).

Альтернативы:

• overflow: auto – добавляет скролл при необходимости.
• word-wrap: break-word – переносит длинные слова.