Урок 8 із 104

Переповнення блоку в CSS

Вивчаємо властивості overflow, overflow-x та overflow-y. Дізнаємося, як керувати відображенням вмісту, що виходить за межі елемента.

Переповнення блоку в CSS

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

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

Властивість overflow керує переповненням одночасно по горизонталі та вертикалі.

visible — вміст виходить за межі елемента (значення за замовчуванням).
hidden — зайвий вміст обрізається.
scroll — завжди показуються смуги прокручування.
auto — смуги прокручування з'являються лише за потреби.

Приклад переповнення текстом


<div class="box">
Дуже довгий текст, який не поміщається всередині блоку та виходить за його межі.
</div>


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

Вертикальна смуга прокручування


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

Обрізання вмісту


.box {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

Керування по окремих осях

Для горизонтального та вертикального напрямків можна використовувати окремі властивості.


.box {
  overflow-x: hidden;
  overflow-y: auto;
}


.image-box {
  width: 300px;
  height: 300px;
  overflow: auto;
}

❗ Важливо:

Найчастіше використовують overflow: auto, оскільки смуги прокручування з'являються лише тоді, коли вони дійсно потрібні.

Практичні завдання

📌 Завдання:

№1. Створіть блок 200×200px і додайте довгий текст, щоб він виходив за межі блоку.
№2. Додайте вертикальну смугу прокручування при переповненні.
№3. Обріжте текст, що виходить за межі блоку.
№4. При наведенні збільшуйте висоту блоку так, щоб увесь текст став видимим.
№5. Створіть блок 300×300px із великою картинкою, яка виходить за його межі.
№6. Додайте смуги прокручування для великої картинки.
№7. Обріжте частини картинки, що виходять за межі блоку.
№8. Обріжте картинку по горизонталі, але залиште вертикальну смугу прокручування.
№9. Створіть блок 150×150px, у якому вертикальна смуга прокручування буде показуватися завжди.

💡 Показати підказку

Використовуйте overflow, overflow-x та overflow-y залежно від того, якою віссю потрібно керувати.

✅ Показати відповідь


/* №1 */
.box {
  width: 200px;
  height: 200px;
}

/* №2 */
.box {
  overflow-y: auto;
}

/* №3 */
.box {
  overflow: hidden;
}

/* №4 */
.box:hover {
  height: auto;
}

/* №5 */
.image-box {
  width: 300px;
  height: 300px;
}

/* №6 */
.image-box {
  overflow: auto;
}

/* №7 */
.image-box {
  overflow: hidden;
}

/* №8 */
.image-box {
  overflow-x: hidden;
  overflow-y: auto;
}

/* №9 */
.box {
  width: 150px;
  height: 150px;
  overflow-y: scroll;
}