<overflow>

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

Тип перечисления <overflow> определяется одним из значений, перечисленных ниже.

visible

Содержимое со сдвигом не обрезается и может быть отображено за пределами области отступа элемента. Ящик элемента не является контейнером прокрутки. Это значение по умолчанию для всех свойств, имеющих тип перечисления <overflow>.

hidden

Содержимое со сдвигом обрезается по области отступа элемента. Нет полос прокрутки, и обрезаемое содержимое не отображается (т.е. обрезаемое содержимое скрыто), но содержимое всё ещё существует. Агенты пользователя не добавляют полосы прокрутки и также не позволяют пользователям просматривать содержимое за пределами области обрезки такими действиями, как перетаскивание на сенсорном экране или использование колесика мыши. Содержимое может быть прокручено программно (например, путём задания значения свойства scrollLeft или метода scrollTo()). Содержимое также может быть прокручено с помощью взаимодействия с клавиатурой; стрелки позволяют прокручивать содержимое, а наведение на фокусируемый элемент в скрытом содержимом позволяет прокрутить фокусируемый элемент в область видимости. Ящик элемента, для которого установлено это значение, является контейнером прокрутки.

clip

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

scroll

Содержимое со сдвигом обрезается по области отступа элемента, и содержимое со сдвигом может быть прокручено в область видимости с помощью полос прокрутки. Агенты пользователя отображают полосы прокрутки как в горизонтальном, так и в вертикальном направлениях, если установлено только одно значение, независимо от того, выходит ли содержимое за пределы или обрезается. Таким образом, использование этого ключевого значения может предотвратить появление и исчезновение полос прокрутки при изменении содержимого. Печатающие устройства всё ещё могут печатать содержимое со сдвигом. Ящик элемента, для которого установлено это значение, является контейнером прокрутки.

auto

Содержимое со сдвигом обрезается по области отступа элемента, и содержимое со сдвигом может быть прокручено в область видимости. В отличие от scroll, агенты пользователя отображают полосы прокрутки только если содержимое выходит за пределы и скрывают полосы прокрутки по умолчанию. Если содержимое помещается в область отступа элемента, оно выглядит так же, как с visible, но всё равно устанавливает новый контекст форматирования. Ящик элемента, для которого установлено это значение, является контейнером прокрутки.

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

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

<pre>&nbsp;
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you

Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true

Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby

<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>

Для демонстрации размер ящика элемента <pre> был определён таким образом, чтобы содержимое выходило за пределы контейнера как по горизонтали, так и по вертикали. Различное значение <overflow> установлено для каждого из повторяющихся элементов <pre>. Для демонстрации значения 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 (or clip if not supported): ";
}

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

Чтобы увидеть эффект фокуса клавиатуры на поведение переполнения и прокрутки, попробуйте навести курсор на все ссылки в примере. Обратите внимание, что ящик clip не создаёт контейнер прокрутки, и ссылка не появляется в поле зрения при фокусировке на ссылке. Значение visible, в котором ссылка всегда находится в области видимости, также не является контейнером прокрутки.

• Свойства, использующие этот тип данных: overflow-x, overflow-y, overflow-inline, overflow-block и overflow
• Модуль CSS overflow