<overflow>

Перелічений тип даних <overflow> представляє значення – ключові слова для розгорнутих властивостей overflow-block, overflow-inline, overflow-x і overflow-y та властивості-скорочення overflow. Ці властивості застосовуються до блокових, гнучких і сіткових контейнерів.

Синтаксис

<overflow> = visible | hidden | clip | scroll | auto

Значення

Перелічений тип даних <overflow> задається за допомогою одного з наведених нижче значень.

visible

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

hidden

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

clip

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

scroll

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

auto

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

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

Приклади

Цей приклад демонструє всі перелічені значення <overflow> для властивості overflow.

HTML

HTML у цьому прикладі містить текст пісні в елементі <pre>. Також в HTML є текстове посилання для тестування впливу фокуса клавіатури на логіку переповнення та прокручення. Той самий код HTML повторюється кілька разів, щоб показати вплив кожного переліченого значення <overflow>.

<pre>&nbsp;
Вийди, вийди, сонечко,
На дідове полечко,
На бабине зіллячко,
На наше подвір'ячко.

На бабине зіллячко,
На наше подвір'ячко,
На весняні квіточки,
На маленькі діточки.

Там вони граються,
Тебе дожидаються.
Там вони граються,
Тебе дожидаються.

<a href="#">Вийди, вийди, сонечко</a>,
На дідове полечко,
Там побачих п'ять овечок
І баранчика між ними
Із ріжками золотими,
Із ріжками золотими.
</pre>

CSS

Для потреб демонстрації розмір рамки елемента <pre> чітко визначений, щоб забезпечити переповнення вмісту контейнера як у рядковому, так і блоковому напрямках. Для кожного з повторюваних елементів <pre> задано різне значення <overflow>. Для демонстрації значення clip було додано визначення overflow-clip-margin.

pre {
  block-size: 100px;
  inline-size: 295px;
}

pre:nth-of-type(1) {
  overflow: hidden;
}
pre:nth-of-type(1)::before {
  content: "hidden: ";
}

pre:nth-of-type(2) {
  overflow: clip;
  overflow-clip-margin: 1em;
}
pre:nth-of-type(2)::before {
  content: "clip: ";
}

pre:nth-of-type(3) {
  overflow: scroll;
}
pre:nth-of-type(3)::before {
  content: "scroll: ";
}

pre:nth-of-type(4) {
  overflow: auto;
}
pre:nth-of-type(4)::before {
  content: "auto: ";
}

pre:nth-of-type(5) {
  overflow: clip;
  overflow: overlay;
  overflow-clip-margin: 3em;
}
pre:nth-of-type(5)::before {
  content: "overlay (або clip, якщо overlay не підтримується): ";
}

pre:nth-of-type(6) {
  overflow: visible;
}
pre:nth-of-type(6)::before {
  content: "visible: ";
}

Результат

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

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

Якщо ви це бачите — значить, щось трапилося з цією сторінкою.

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

Якщо ви це бачите — значить, щось трапилося з цією сторінкою.

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

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.