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-x, а друге – до overflow-y. Інакше – і overflow-x, і overflow-y отримують одне значення.

Значення

visible (видимий)

Вміст не обрізається і може бути зображений поза рамками внутрішніх полів.

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

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

clip (обрізати)

Подібно до hidden, вміст обрізається до рамок внутрішніх полів елемента. Різниця між clip і hidden полягає в тому, що ключове слово clip також забороняє будь-яке прокручування, включно з програмним. Рамки не є контейнером прокручування, вони не започатковують нового контексту форматування. При потребі започаткувати новий контекст форматування це можна зробити за допомогою display: flow-root.

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

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

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

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

overlay (перекриття)

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

Розширення Mozilla

-moz-scrollbars-none

Використовуйте натомість overflow: hidden.

-moz-scrollbars-horizontal

Використовуйте натомість <a href="/uk/docs/Web/CSS/overflow-x"><code>overflow-x</code></a>: scroll і <a href="/uk/docs/Web/CSS/overflow-y"><code>overflow-y</code></a>: hidden чи overflow: scroll hidden.

-moz-scrollbars-vertical

Використовуйте натомість <a href="/uk/docs/Web/CSS/overflow-x"><code>overflow-x</code></a>: hidden і <a href="/uk/docs/Web/CSS/overflow-y"><code>overflow-y</code></a>: scroll чи overflow: hidden scroll.

-moz-hidden-unscrollable

Використовуйте натомість overflow: clip.

Станом на Firefox версії 63, значення -moz-scrollbars-none, -moz-scrollbars-horizontal і -moz-scrollbars-vertical заховані за налаштуваннями можливостей. На about:config, перемкніть layout.css.overflow.moz-scrollbars.enabled на true.

Опис

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

Задання значення, відмінного від visible (усталеного) і clip, породжує новий контекст блокового форматування. Це необхідно з технічних причин: якби плавучий елемент перетнувся з прокрутним елементом, це змусило б повторно розставляти переноси всередині вмісту після кожного кроку прокручування, і як наслідок – призвело б до повільного прокручування.

Щоб overflow мала дію, контейнер блокового рівня мусить мати або задану висоту (height чи max-height), або white-space зі значенням nowrap.

Встановлення однієї осі у visible (усталене значення), а іншої – у відмінне значення – призводить до того, що visible поводиться як auto.

Властивість JavaScript Element.scrollTop може застосовуватись для прокручування елемента HTML навіть тоді, коли overflow має значення hidden.

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

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

[ 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>scroll</code>
  <p class="scroll">
    Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п'яне знаємо.
  </p>
</div>

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

CSS

body {
  display: flex;
  justify-content: space-around;
}

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

p {
  width: 8em;
  height: 5em;
  border: dotted;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

Результат

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

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

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

• Прокрутні області, доступні з клавіатури

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

              <br />
              <small>
                  # propdef-overflow
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>