overflow

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

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

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

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

• overflow-x
• overflow-y

Синтаксис

/* Значення – ключові слова */
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, але все одно створює новий контекст форматування. Рамка елемента є контейнером прокручення.

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

Опис

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

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

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

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

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

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

Доступність

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

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

Приклади

Демонстрація результатів різних ключових слів 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

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

div {
  margin: 2em;
  font-size: 1.2em;
}

p {
  width: 5em;
  height: 5em;
  border: dotted;
  margin-top: 0.5em;
}

div:nth-of-type(5),
div:nth-of-type(6) {
  margin-top: 200px;
}

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;
}

Результат

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

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

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

• overflow-x, overflow-y
• overflow-block, overflow-clip-margin, overflow-inline
• clip, display, text-overflow, white-space
• Переповнення CSS
• Keyboard-only scrolling areas on adrianroselli.com (November 28, 2022)
• Області прокручення лише клавіатурою на adrianroselli.com (28 листопада 2022 року)