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.
- Нотатка
-
Властивість працює лише для блокових елементів із заданою висотою або шириною (властивість
автор: Svitlanaheightабоwidth). - Нотатка
-
JavaScript-властивість
автор: Svitlanaelement.scrollTopможе бути застосоване для елементу, навіть якщо він має встановлене значенняhiddenдляoverflow.
Синтаксис
overflow: visible|hidden|scroll|auto|initial|inherit;Властивість overflow може отримувати 6 значень:
-
visible -
За замовчуванням. Вміст не обрізається, може відображатися зовні блоку, в якому воно розташоване.
автор: Svitlana -
hidden -
Контет обрізається, без надання прокрутки.
автор: Svitlana -
scroll -
Вміст обрізається і браузер використовує елементи прокрутки, не має значення чи було обрізано вміст чи ні. Це уникає багатьох проблем щодо появи прокручувань і їх зникнення в динамічному середовищі. Принтери можуть друкувати переповнене вміст.
автор: Svitlana -
auto -
Смуги прокручування з'являються, тільки при необхідності
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | visible |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.overflow="scroll" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 7 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Вміст більший за блок 150×150, і overflow: scroll дає смуги прокрутки — нічого не обрізається назавжди.
HTML
<div>Вміст цього блока навмисно більший за його розміри: прокрути, щоб дочитати. Ще трохи тексту, щоб прокрутці точно було що ховати за нижнім краєм блока.</div>CSS
div {
width: 150px;
height: 150px;
overflow: scroll;
border: 1px solid #ccc;
}Динамічний приклад
Приклад використання overflow.
Демонстрація роботи властивості
Коментарі
Коментарів ще немає — будьте першим!