В overflowконтролю власності , що відбувається з вмістом , яке ламається за межами своїх кордонів: уявіть , divв якому ви явно встановити , щоб бути 200px в ширину, але містить зображення, яке 300px в ширину. Це зображення буде стирчати з div і буде visibleза замовчуванням. Тоді як якщо ви встановите overflowзначення hidden, зображення буде відрізане на 200 пікселів.
div ( overflow: visible | hidden | scroll | auto | inherit )Цінності
visible: вміст не обрізається, коли він надходить поза рамкою. Це значення властивості за замовчуваннямhidden: переповнення вмісту буде приховано.scroll: схоже на приховане, окрім того, що користувачі зможуть прокручувати прихований вмістauto: якщо вміст надходить поза рамкою, то цей вміст буде прихований, тоді як смужка прокрутки повинна бути видимою для користувачів, щоб прочитати решту вмісту.initial: використовує значення за замовчуванням, яке єvisibleinherit: встановлює переповнення значенням його батьківського елемента.
Пам’ятайте, що текст, природно, обернеться в кінці елемента (якщо пробіл не змінено), тому текст рідко стає причиною переповнення. Якщо не встановлена висота, текст також просто підсуне елемент вище. Переповнення вступає в дію частіше, коли встановлені явні ширини та висоти, і було б небажано, щоб будь-який вміст розливався, або коли явно уникали прокрутки.
Видно
Якщо ви взагалі не встановите властивість переповнення, буде видно за замовчуванням. Отже, загалом, немає жодної причини явно встановлювати цю властивість видимою, якщо ви не відміняєте її від встановлення в іншому місці.
Тут важливо пам’ятати, що, незважаючи на те, що вміст видно поза рамки, цей вміст не впливає на потік сторінки. Наприклад:
Як правило, ви все одно не повинні встановлювати статичну висоту для полів із веб-текстом, тому це не повинно з’являтися.
Прихований
Протилежність видимому за замовчуванням прихована . Це буквально приховує будь-який вміст, який виходить за рамки.
Це особливо корисно у використанні з динамічним вмістом та можливістю переповнення, що спричиняє серйозні проблеми з макетом. Однак майте на увазі, що прихований таким чином вміст є абсолютно недоступним (неможливо переглянути джерело). Так, наприклад, для користувача розмір шрифту за замовчуванням встановлений більший, ніж ви очікували, можливо, ви висуваєте текст за межі поля і повністю приховуєте його від його зору.
Прокрутіть
Встановлення значення переповнення поля для прокрутки приховає вміст від рендерингу поза рамкою, але запропонує смуги прокрутки для прокрутки внутрішньої частини поля для перегляду вмісту.
Зауважимо, що з цим значенням ви отримуєте ОБІ горизонтальні та вертикальні смуги прокрутки, незважаючи ні на що, навіть якщо для вмісту потрібні лише ті чи інші.
Прокрутку імпульсу iOS для цього значення можна ввімкнути за допомогою -webkit-overflow-scrolling.
Примітка: У OS X Lion, коли смуги прокрутки встановлені на показ лише під час використання, scrollповодиться більш схоже autoна те, що відображатимуться лише потрібні смуги прокрутки.
Авто
Автоматичне переповнення дуже схоже на значення прокрутки, лише вирішує проблему отримання смуг прокрутки, коли вони вам не потрібні. Полоски прокрутки з’являться, лише якщо є вміст, який насправді виривається з елемента.
overflow-x та overflow-y
Також можна маніпулювати переповненням вмісту горизонтально або вертикально властивостями overflow-xта overflow-y. Наприклад, у демонстраційній частині нижче горизонтальне переповнення можна прокрутити, поки текст, що виходить за межі висоти поля, прихований:
.box ( overflow-y: hidden; overflow-x: scroll; )Очищення поплавка
Одним із найпопулярніших способів налаштування переповнення, як не дивно, є очищення поплавка. Встановлення переповнення не очищає поплавок на елементі, він самоочищається. Це означає, що елемент із переповненням (будь-яке значення, крім visible) поширюватиметься настільки великим, наскільки йому потрібно, щоб охопити дочірні елементи всередині, які плавають (замість згортання), припускаючи, що висота не оголошена. Подобається це:
Кращим методом очищення з плаваючою функцією є clearfix, оскільки він не вимагає від вас змін властивості переповнення таким чином, який вам не потрібен.
Створення контексту форматування блоків
Цікаво відзначити, що overflowтакож буде створено новий контекст форматування блоку, який корисний, якщо ми хочемо вирівняти елемент блоку поруч із плаваючим. У наведеному нижче прикладі ми показуємо, як ряд абзаців буде взаємодіяти із плаваючим зображенням за замовчуванням, а потім ми використовуємо overflow: hiddenдля вирівнювання тексту у власному полі:
Це виходить із чудового допису Ніколь Салліван, яке надихнуло медіа-об’єкт.
Чи можна стилі смуги прокручувати за допомогою CSS?
Раніше ви могли стилювати смуги прокрутки в IE (v5.5?), Але не більше. Ви можете знову їх стилізувати у веб-переглядачах WebKit. Якщо вам потрібні власні смуги прокрутки між браузерами, зверніться до JavaScript.
Якщо до елемента потрібно додати смуги прокрутки для дотримання значення переповнення, Firefox розміщує їх поза елементом, зберігаючи видиму ширину / висоту, як було оголошено. IE поміщає смуги прокрутки всередину, зберігаючи загальну ширину / висоту, як було заявлено.
Демо
Демонстраційні матеріали для цієї статті взяті з цієї зразкової сторінки.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | ТП |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Пов’язані
- Властивість float
Більше інформації
- Розуміння Humble Clearfix
- Переповнення: таємна вигода
- Переповнення на MDN
- Переповнення на W3C
- Пошук / виправлення ненавмисного переповнення тіла