css властивість overflow-y

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

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

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

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

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

правити

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

Синтаксис

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

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

visible

Відображає ввесь вміст елемента, навіть вміст, що за межами елемента. Без задання.

автор: Svitlana

правити

hidden

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

автор: Svitlana

правити

scroll

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

автор: Svitlana

правити

auto

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
overflow-y	4.0	3.5	3.0	9.5	9.0

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

Переглядач
overflow-y	1.0	1.0	3.0

Приклади

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

<div>Тексту в цьому блоці навмисно більше, ніж уміщається у фіксовану висоту, тож нижні рядки просто зрізано.</div>

div {
    width: 200px;
    height: 60px;
    overflow-y: hidden;
    border: 1px solid #0172ad;
}