Как исправить переполнение контентом в CSS?

Как исправить переполнение контентом в CSS

Переполнение (overflow) происходит, когда содержимое элемента больше, чем его размер. CSS предоставляет несколько способов справиться с этой проблемой в зависимости от желаемого результата.

Способ 1: Свойство overflow

overflow: hidden — скрывает избыточный контент:

.box {
  width: 200px;
  height: 100px;
  overflow: hidden;
  border: 1px solid black;
}

<div class="box">
  Это очень длинный текст, который будет обрезан и скрыт за пределами контейнера
</div>

Результат: текст будет обрезан по границам контейнера.

overflow: visible (по умолчанию) — контент выходит за границы:

.box {
  overflow: visible;
}

overflow: auto — добавляет полосу прокрутки только если нужна:

.box {
  width: 200px;
  height: 100px;
  overflow: auto;
}

overflow: scroll — всегда показывает полосу прокрутки:

.box {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

Способ 2: overflow-x и overflow-y

Контролирование переполнения по отдельным осям:

.horizontal-scroll {
  width: 300px;
  overflow-x: auto;   /* Горизонтальная прокрутка */
  overflow-y: hidden; /* Вертикальное переполнение скрыто */
}

.vertical-scroll {
  height: 200px;
  overflow-x: hidden; /* Горизонтальное переполнение скрыто */
  overflow-y: auto;   /* Вертикальная прокрутка */
}

Способ 3: text-overflow для текста

Обрезание текста с многоточием:

.ellipsis {
  width: 200px;
  white-space: nowrap;    /* Текст на одной линии */
  overflow: hidden;       /* Скрываем переполнение */
  text-overflow: ellipsis; /* Добавляем многоточие (...) */
}

<p class="ellipsis">Очень длинный текст, который будет обрезан с многоточием...</p>

Многострочное обрезание:

.truncate-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3;     /* Максимум 3 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Способ 4: word-wrap и word-break

word-wrap: break-word — переносит слова на новую строку:

.wrap-text {
  width: 200px;
  word-wrap: break-word;  /* или overflow-wrap: break-word */
}

word-break: break-all — разбивает слова посередине:

.break-word {
  width: 150px;
  word-break: break-all;
}

Сравнение:

.wrap-text {
  word-wrap: break-word;
  /* "verylongword" останется на одной линии или перейдёт на новую целиком */
}

.break-word {
  word-break: break-all;
  /* "verylongword" может быть разбито как "verylo-ngword" */
}

Способ 5: white-space для управления пробелами

.no-wrap {
  white-space: nowrap;  /* Текст не переносится */
}

.normal-wrap {
  white-space: normal;  /* По умолчанию */
}

.preserve-space {
  white-space: pre;     /* Сохраняет пробелы и переносы строк */
}

.pre-wrap {
  white-space: pre-wrap; /* Сохраняет пробелы, но переносит слова */
}

Способ 6: Управление размером через max-width и min-width

Ограничение максимальной ширины:

.container {
  max-width: 800px;  /* Не будет шире 800px */
  margin: 0 auto;    /* Центрируем */
}

img {
  max-width: 100%;   /* Изображение не выходит за границы контейнера */
  height: auto;      /* Сохраняем пропорции */
}

Способ 7: Использование flexbox для управления переполнением

.flex-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;  /* Горизонтальная прокрутка */
}

.flex-item {
  flex: 0 0 150px;   /* Не сжимается, ширина 150px */
  min-width: 0;      /* Важно: позволяет тексту переноситься */
}

Способ 8: Использование grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  overflow: hidden;
}

.grid-item {
  overflow: hidden;       /* Скрываем переполнение в ячейке */
  text-overflow: ellipsis;
  white-space: nowrap;
}

Способ 9: Практические примеры

Карточка с текстом и многоточием:

.card {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
}

.card-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 10px;
  color: #666;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;  /* Масштабирует изображение без искажения */
  overflow: hidden;
}

<div class="card">
  <img src="image.jpg" alt="" class="card-image">
  <h3 class="card-title">Очень длинный заголовок карточки</h3>
  <p class="card-description">Это описание карточки, которое может быть достаточно длинным...</p>
</div>

Прокручиваемый список:

.scrollable-list {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
}

.scrollable-list::-webkit-scrollbar {
  width: 8px;
}

.scrollable-list::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.scrollable-list::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

Способ 10: position: absolute для выхода за границы

Если нужно, чтобы элемент выходил за границы родителя:

.container {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
  border: 2px solid black;
}

.tooltip {
  position: absolute;
  top: -50px;
  background: black;
  color: white;
  padding: 5px 10px;
  z-index: 10;  /* Выходит поверх других элементов */
}

Сравнительная таблица решений

Выводы

• overflow: hidden — скрывает переполнение
• overflow: auto — добавляет прокрутку если нужна
• text-overflow: ellipsis — добавляет многоточие для обрезанного текста
• word-wrap/word-break — переносят слова на новую строку
• max-width — ограничивает размер контейнера
• -webkit-line-clamp — ограничивает количество строк
• Выбирай решение в зависимости от типа контента и желаемого поведения