css властивість overflow
Властивість overflow вказує, що зробити для переповненого елемента:
- Обрізати вміст, що поза межами елемента, без можливості його перегляду.
- Відобразити вміст, що поза межами елемента.
- Обрізати вміст, що поза межами елемента та для можливості перегляду обрізаного тексту, відобразити смуги прокрутки.
У CSS3 властивість overflow є скроченим записом для двох інших: overflow-x i overflow-y.
Для того, щоб побачити результат дії overflow, разом з ним для елементу треба прописати також висоту(height або max-height), або задати значення nowrap для white-space.
В стані чорнетки, існують три ключові слова, які можна буде використовувати в якості значень для overflow: no-display, no-content, clip.
| Нотатка: | Властивість працює лише для блокових елементів із заданою висотою або шириною (властивість |
| Нотатка: | JavaScript-властивість |
Синтаксис
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;
}