overflow

Властивість-скорочення CSS overflow (надлишок) задає бажану поведінку для тих випадків, коли вміст не вміщається у батьківський елемент (переливається через край) в горизонтальному чи вертикальному напрямку.

Спробуйте його в дії

Властивості-складові

Ця властивість є скороченням для наступних властивостей CSS:

Синтаксис

/* Значення – ключові слова */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Глобальні значення */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

Властивість overflow задається як одне чи два ключові слова – значення типу <overflow>. Якщо задано лише одне ключове слово, то overflow-x та overflow-y отримують однакове значення. Якщо задано два, то перше з них застосовується до overflow-x – у горизонтальному напрямку, а друге – до overflow-y – у вертикальному напрямку.

Значення

visible (видимий)

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

hidden (прихований)

Вміст, що не вміщається, обрізається в межах рамки внутрішніх полів елемента. Смуг прокручення немає, і обрізаний вміст не видимий (тобто є прихованим), але він все одно існує. Користувацькі агенти не додають смуги прокручення, а також не дозволяють користувачам переглядати вміст за межами обрізаної області за допомогою дій, подібних до перетягування на сенсорному екрані або використання колеса миші. Такий вміст може бути прокручений програмно (наприклад, за допомогою задання значення властивості scrollLeft або методу scrollTo()), і в такому випадку рамка елемента є контейнером прокручення.

clip (обрізати)

Вміст, що не вміщається, обрізається в межах краю обрізання надлишку елемента, котрий заданий за допомогою властивості overflow-clip-margin. Як наслідок, вміст переповнює рамку внутрішніх полів елемента на значення <length> властивості overflow-clip-margin, або на 0px, якщо ця властивість не задана. Вміст, що вміщається і лежить поза областю обрізання, не видимий, користувацькі агенти не додають смуги прокручення, а також не підтримується програмне прокручення. Не створюється новий контекст форматування. Для створення контексту форматування використовуйте overflow: clip вкупі з display: flow-root. Рамка елемента не є контейнером прокручення.

scroll (прокручувати)

Вміст, що не вміщається, обрізається в межах рамки внутрішніх полів елемента, але до нього можна докрутити за допомогою смуг прокручення. Користувацькі агенти показують такі смуги як у горизонтальному, так і в вертикальному напрямку, якщо задано лише одне значення, незалежно від того, чи є вміст, що переливається через край або обрізається. Таким чином, використання цього ключового слова може запобігти появі та зникненню смуг прокручення при зміні вмісту. Принтери все одно можуть друкувати вміст, що переповнюється. Рамка елемента є контейнером прокручення.

auto (автоматично)

Вміст, що не вміщається, обрізається в межах рамки внутрішніх полів елемента, але до нього можна докрутити. На відміну від scroll, користувацькі агенти показують смуги прокручення лише якщо вміст не вміщається, і усталено ці смуги приховані. Якщо вміст вписується в рамку внутрішніх полів елемента, то він виглядає так само, як і з ключовим словом visible, але все одно створює новий контекст форматування. Рамка елемента є контейнером прокручення.

Примітка: Ключове значення overlay є історичним псевдонімом auto. З overlay смуги прокручення малюються поверх вмісту, замість того, щоб займати простір.

Опис

Серед варіантів роботи з надлишком – його приховування, вмикання смуг прокручення для його перегляду та відображення вмісту, що виливається за край рамки елемента в навколишній простір, а також поєднання цих варіантів.

При використанні для overflow різних ключових слів слід мати на увазі наступні особливості:

  • Задання overflow значення, відмінного від visible (усталеного) та clip, утворює новий контекст блокового форматування. Це необхідно з технічних причин; якщо зміщений елемент перетинається з елементом, що прокручується, то він примусово перерозставляє розриви рядків після кожного кроку прокручування, що призводить до повільного прокручування.
  • Щоб налаштування overflow дало бажаний ефект, елемент блокового рівня повинен мати або задану висоту (height або max-height), або white-space зі значенням nowrap.
  • Задання одної осі зі значенням visible (усталеним), а іншої з іншим значенням – призводить до того, що visible поводиться як auto.
  • Властивість JavaScript Element.scrollTop може використовуватися для прокручення вмісту в контейнері прокручення, в тому числі коли overflow задано зі значенням hidden.

Формальне визначення

Початкове значенняvisible
Успадковуєтьсяні
Обчислене значеннятак як і всі інші властивості зі скорочення:
  • overflow-x: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
  • overflow-y: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip

Формальний синтаксис

[ visible | hidden | clip | scroll | auto ]{1,2}

Приклади

Демонстрація результатів різних ключових слів overflow

HTML

<div>
  <code>visible</code>
  <p class="visible">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

<div>
  <code>overlay</code>
  <p class="overlay">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

CSS

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.clip {
  overflow: clip;
  overflow-clip-margin: 1em;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

p.overlay {
  overflow: overlay;
}

Результат

Занепокоєння щодо доступності

Область прокрутного вмісту не може прокручуватись користувачем, в розпорядженні якого є лише клавіатура, окрім користувачів Firefox (котрий усталено дає змогу контейнерові такого змісту отримувати фокус за допомогою клавіатури).

Аби дати змогу користувачам лише клавіатури прокручувати такий контейнер не тільки у Firefox, розробникам слід задавати цьому контейнеру tabindex, вживши tabindex="0". На жаль, коли читач з екрана зустріне таку зупинку табуляції, то не матиме контексту для розуміння, що це таке, і оголосить увесь його вміст. Задання такому контейнерові відповідної ролі WAI-ARIA (role="region", наприклад) і доступного імені (за допомогою aria-label або aria-labelledby) може пом'якшити цю проблему.

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
overflow
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
footnote
Internet Explorer Full support 4
footnote
Opera Full support 7
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
clip value
Chrome Full support 90
Edge Full support 90
Firefox Full support 81
Internet Explorer No support No
Opera Full support 76
Safari Preview browser support TP
disabled
WebView Android Full support 90
Chrome Android Full support 90
Firefox for Android Full support 81
Opera Android No support No
Safari on iOS No support No
Samsung Internet Full support 15.0
Multiple keyword syntax for overflow-x and overflow-y
Chrome Full support 68
Edge Full support 79
Firefox Full support 61
Internet Explorer No support No
Opera Full support 55
Safari No support No
WebView Android Full support 68
Chrome Android Full support 68
Firefox for Android Full support 61
Opera Android Full support 48
Safari on iOS No support No
Samsung Internet Full support 10.0
overlay value
Chrome Full support 15
Edge Full support 79
Firefox No support No
Internet Explorer No support No
Opera Full support 15
Safari No support No
WebView Android Full support 100
Chrome Android Full support 100
Firefox for Android No support No
Opera Android No support No
Safari on iOS No support No
Samsung Internet Full support 4.0

Дивіться також