Властивість CSS overflow

Що таке CSS Overflow?

Властивість overflow контролює те, що відбувається з контентом, який занадто великий, щоб вміститися в коробці елемента. Вона визначає, чи буде контент обрізаним, прокручуваним або видимим за межами контейнера.

Значення Overflow

Значення	Опис
`visible`	Контент виходить за межі коробки (за замовчуванням)
`hidden`	Контент обрізається, без смуги прокрутки
`scroll`	Контент обрізається, смуга прокрутки завжди видима
`auto`	Смуга прокрутки з'являється лише тоді, коли контент виходить за межі
`clip`	Як `hidden`, але запобігає програмному прокручуванню

css

/* Контент обрізається */
.box-hidden {
  overflow: hidden;
  width: 300px;
  height: 200px;
}

/* Смуга прокрутки, коли потрібно */
.box-auto {
  overflow: auto;
  max-height: 400px;
}

/* Завжди показувати смугу прокрутки */
.box-scroll {
  overflow: scroll;
  height: 300px;
}

Overflow-x та Overflow-y

Ви можете контролювати горизонтальний та вертикальний overflow незалежно:

css

.horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.vertical-scroll {
  overflow-x: hidden;
  overflow-y: auto;
}

Загальні випадки використання

1. Обрізання тексту з еліпсисом

css

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Обрізання на кількох рядках */
.truncate-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

2. Очищення флоатів

css

.clearfix { overflow: auto; }

3. Прокручуваний контейнер

css

.chat-messages {
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  scroll-behavior: smooth;
}

4. Сховування декоративного overflow

css

.card {
  overflow: hidden;
  border-radius: 12px; /* Обрізає дочірній контент до закруглених кутів */
}

overflow: hidden та BFC

Встановлення overflow: hidden (або auto, scroll) створює Контекст Форматування Блоку (BFC), який:

Утримує флоатовані дочірні елементи
Запобігає злиттю відступів
Ізолює макет від навколишніх елементів

Важливо:

Властивість overflow є важливою для створення прокручуваних контейнерів, обрізання тексту та запобігання проблемам з переповненням макету. Використовуйте auto замість scroll, коли хочете, щоб смуги прокрутки з'являлися лише за потреби.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань