Использовать CSS свойства: overflow, text-overflow, word-wrap, white-space.

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

Основные значения:

visible (по умолчанию): контент отображается за пределами блока.
hidden: контент обрезается и скрывается за пределами блока.
scroll: добавляет скроллбар, позволяя прокручивать контент. Всегда добавляет оба скроллбара (горизонтальный и вертикальный), даже если один не нужен.
auto: добавляет скроллбар только при необходимости.

.container {
  width: 200px;
  height: 100px;
  overflow: hidden; /* Обрезать контент, выходящий за пределы */
}

Свойство text-overflow: указывает, как отображать текст, который не помещается в блок с overflow: hidden.

Значения:

clip (по умолчанию): текст обрезается.
ellipsis: обрезает текст и отображает многоточие (...) в конце.

Используется в сочетании с white-space: nowrap и overflow: hidden.

.container {
  width: 200px;
  white-space: nowrap; /* Запретить перенос строк */
  overflow: hidden; /* Обрезать контент */
  text-overflow: ellipsis; /* Добавить многоточие */
}

Свойство word-wrap (или overflow-wrap): определяет, может ли браузер переносить длинные слова на новую строку, если они не помещаются в контейнере.

Значения:

normal (по умолчанию): слова переносятся только в стандартных точках переноса (пробелы, дефисы).
break-word: слова могут быть разорваны в любом месте для предотвращения переполнения.

.container {
  width: 200px;
  word-wrap: break-word; /* Разрешить разрыв длинных слов */
}

Свойство white-space: управляет тем, как обрабатываются пробелы и переносы строк внутри элемента.

Полезные значения для борьбы с переполнением:

normal: пробелы схлопываются, текст переносится автоматически.
nowrap: пробелы схлопываются, но текст не переносится на новую строку (может вызвать переполнение). Требует overflow для управления видимым контентом.

.container {
  white-space: nowrap; /* Запретить перенос строк */
  overflow: hidden; /* Скрыть переполнение */
  text-overflow: ellipsis; /* Добавить многоточие */
}

Дополнительные подходы:

Гибкие макеты (Flexbox/Grid): Использование Flexbox или CSS Grid позволяет создавать адаптивные макеты, которые лучше масштабируются и предотвращают переполнение контента за счет гибкого распределения пространства.
Медиазапросы: Изменение стилей (например, уменьшение размера шрифта, изменение компоновки) на разных разрешениях экрана для адаптации контента.
Динамическая подстройка контента: В некоторых случаях, при помощи JavaScript, можно измерять размеры контента и контейнера, и вносить изменения (например, укорачивать текст, скрывать часть элементов) для предотвращения переполнения.

Выбор конкретного метода зависит от типа контента и желаемого визуального результата. Обычно требуется комбинация этих подходов.

Как вы рекомендуете бороться с переполнением контента на веб-странице?