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


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

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

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

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

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

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

Нотатка:

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

Нотатка:

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

Синтаксис

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

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

visible

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

hidden

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

scroll

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

auto

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

initial

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

inherit

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

Значення без задання: visible
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.overflow="scroll"

Переглядачі

Переглядач
overflow

1.0

4.0

1.0

1.0

7.0

Переглядач
overflow

1.0

1.0

1.0

Приклади


Динамічний приклад

Демонстрація роботи властивості

Приклад використання overflow.

Встановлює властивість overflow для прокрутки

div {


    width: 150px;


    height: 150px;


    overflow: scroll;


}

Додаткові посилання