Как в CSS избежать переполнения контента

Используй overflow для управления переполнением контента. Основные варианты:

1. overflow: hidden – скрывает лишний контент.

.container {
  overflow: hidden;
}

2. overflow: auto – добавляет скролл при необходимости.

.container {
  overflow: auto;
}

3. text-overflow: ellipsis – обрезает текст и добавляет многоточие (работает с white-space: nowrap).

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

4. word-break: break-word – переносит длинные слова.

.text {
  word-break: break-word;
}

Для гибкости можно комбинировать свойства, например, max-width с overflow.