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;


}

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