Тип CSS `<overflow>`

Тип перечисляемых значений <overflow> представляет ключевые значения для свойств с длинными именами overflow-block, overflow-inline, overflow-x и overflow-y, а также для сокращённого свойства overflow. Эти свойства применяются к блочным, flex- и grid-контейнерам.

Синтаксис

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

Значения

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

visible

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

hidden

Выходящее за пределы элемента содержимое обрезается по границе его внутреннего поля. Полосы прокрутки отсутствуют, а обрезанное содержимое не отображается (то есть скрыто), но продолжает существовать. Пользовательские агенты не добавляют полосы прокрутки и не позволяют просматривать содержимое за пределами обрезанной области с помощью таких действий, как перетаскивание на сенсорном экране или прокрутка колёсиком мыши. Содержимое можно прокручивать программно (например, задав значение свойства scrollLeft или вызвав метод scrollTo()). Содержимое также можно прокручивать с помощью клавиатуры: клавиши со стрелками позволяют перемещаться по содержимому, а переход клавишей Tab к элементу внутри скрытого содержимого, который может получать фокус, прокручивает его в область видимости. Блок элемента, для которого задано это значение, является прокручиваемым контейнером.

clip

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

scroll

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

auto

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

Примеры

В этом примере показаны все перечисляемые значения <overflow> для свойства overflow.

HTML

В 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>&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>&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>&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>&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>&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>

CSS

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

pre {
  border: 2px dashed red;
  margin-bottom: 3em;
}

::before {
  font-weight: bold;
  color: white;
  background: crimson;
  display: inline-block;
  width: 100%;
  padding: 3px 5px;
  box-sizing: border-box;
}

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

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