CSS overflow — обрізання вмісту: hidden, scroll, auto, clip

Властивість overflow вказує, що зробити для переповненого елемента:

• Обрізати вміст, що поза межами елемента, без можливості його перегляду.
• Відобразити вміст, що поза межами елемента.
• Обрізати вміст, що поза межами елемента та для можливості перегляду обрізаного тексту, відобразити смуги прокрутки.

У CSS3 властивість overflow є скроченим записом для двох інших: overflow-x i overflow-y.

Для того, щоб побачити результат дії overflow, разом з ним для елементу треба прописати також висоту(height або max-height), або задати значення nowrap для white-space.

В стані чорнетки, існують три ключові слова, які можна буде використовувати в якості значень для overflow: no-display, no-content, clip.

правити

Нотатка

Властивість працює лише для блокових елементів із заданою висотою або шириною (властивість height або width).

автор: Svitlana правити

Нотатка

JavaScript-властивість element.scrollTop може бути застосоване для елементу, навіть якщо він має встановлене значення hidden для overflow.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

overflow: visible|hidden|scroll|auto|initial|inherit;

Властивість overflow може отримувати 6 значень:

visible

За замовчуванням. Вміст не обрізається, може відображатися зовні блоку, в якому воно розташоване.

автор: Svitlana

правити

hidden

Контет обрізається, без надання прокрутки.

автор: Svitlana

правити

scroll

Вміст обрізається і браузер використовує елементи прокрутки, не має значення чи було обрізано вміст чи ні. Це уникає багатьох проблем щодо появи прокручувань і їх зникнення в динамічному середовищі. Принтери можуть друкувати переповнене вміст.

автор: Svitlana

правити

auto

Смуги прокручування з'являються, тільки при необхідності

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
overflow	1.0	1.0	1.0	7.0	4.0

Підтримка: мобільні переглядачі

Переглядач
overflow	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div>Вміст цього блока навмисно більший за його розміри: прокрути, щоб дочитати. Ще трохи тексту, щоб прокрутці точно було що ховати за нижнім краєм блока.</div>

div {
    width: 150px;
    height: 150px;
    overflow: scroll;
    border: 1px solid #ccc;
}