Свойство CSS `overflow`

overflow — свойство-CSS-сокращение, которое задаёт желаемое поведение, когда содержимое не помещается в область внутренних отступов элемента (выходит за её границы) по горизонтали и/или вертикали.

Попробуйте

overflow: visible;

overflow: hidden;

overflow: clip;

overflow: scroll;

overflow: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's
    Inn Hall. Implacable November weather. As much mud in the streets as if the
    waters had but newly retired from the face of the earth.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

Составные свойства

Это свойство является сокращением для следующих свойств CSS:

• overflow-x
• overflow-y

Синтаксис

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;

/* Two-value syntax: horizontal | vertical */
overflow: hidden visible;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

Значения

Это свойство задаётся одним или двумя разделёнными пробелом ключевыми значениями <overflow>:

visible

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

hidden

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

clip

Переполняющее содержимое обрезается по границе обрезки переполнения элемента, заданной свойством overflow-clip-margin. Блок элемента не является контейнером прокрутки, обрезанное содержимое не видно, а программная прокрутка не поддерживается.

scroll

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

auto

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

Нестандартные значения

В некоторых браузерах также поддерживаются некоторые нестандартные значения:

overlay

Устаревший псевдоним для auto, добавленный в спецификацию для совместимости с веб-сайтами. Изначально реализован как нестандартное значение, при котором полосы прокрутки отображались поверх содержимого, а не занимали место. Не рекомендуется использовать его в новом коде.

Описание

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

Свойство overflow является сокращением для горизонтального свойства overflow-x и вертикального свойства overflow-y. Если указано только одно ключевое слово, значения overflow-x и overflow-y будут одинаковыми. Если указаны два ключевых слова, первое значение применяется к overflow-x в горизонтальном направлении, а второе — к overflow-y в вертикальном направлении.

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

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

Что вызывает переполнение

Переполнение возникает, когда блочный элемент содержит содержимое, выходящее за пределы отведённого ему пространства. Отведённое пространство может ограничиваться высотой (height или max-height) для вертикального переполнения, шириной (width или max-width) для горизонтального переполнения, размером блока (block-size или max-block-size) для переполнения в направлении блока или размером по строке (inline-size, max-inline-size или свойством white-space, заданным как nowrap) для переполнения в строчном направлении.

Следующий код CSS ограничивает размер контейнера, задавая значения свойств блочной модели, которые задают это ограничение. Также добавлен цвет фона, обрезаемый по content-box, чтобы наглядно показать, как переполняющее содержимое выходит за границы области содержимого в дальнейших пояснениях.

div {
  height: 10em;
  width: 15em;
  border: 3px solid;
  padding: 10px;

  background-color: #ededed;
  background-clip: content-box;
}

Разбираемся в значениях переполнения

Различные значения overflow определяют, есть ли у элемента полосы прокрутки, можно ли прокручивать его содержимое пользователю и программно, а также является ли элемент контейнером прокрутки (который создаёт новый контекст форматирования блока) при переполнении его содержимого и, в случае scroll, даже если переполнения нет.

Значение visible

Значение по умолчанию — visible. По умолчанию, если содержимое выходит за ограничения контейнера, оно не ограничивается его границами. Элемент со значением visible по умолчанию или заданным явно не имеет полос прокрутки, не поддерживает прокрутку пользователем или программно и не является контейнером прокрутки. Это значение не создаёт новый контекст форматирования блока.

div {
  overflow: visible;
}

<div>
  <h2>overflow: visible;</h2>
</div>
<div>
  <p>
    The <code>overflow</code> property in this example is set to
    <code>visible</code>. No scroll container is created; the content just
    overflows the container.
  </p>
</div>

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

Значение scroll

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

Элемент всегда является контейнером прокрутки — даже если переполняющего содержимого нет, — и поддерживает прокрутку как пользователем, так и программно.

div {
  overflow: scroll;
}

<div>
  <h2>overflow: scroll;</h2>
</div>
<div>
  <p>
    The <code>overflow</code> property in this example is set to
    <code>scroll</code>. A scroll container is created; a scrollbar is always
    visible, even if not needed.
  </p>
</div>

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

Значение auto

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

div {
  overflow: auto;
}

<div>
  <h2>overflow: auto;</h2>
</div>
<div>
  <p>
    The <code>overflow</code> property in this example is set to
    <code>auto</code>. Because there is overflowing content, a scroll container
    is created. The content is clipped to the padding box and a scroll bar
    enables scrolling to the overflowing content.
  </p>
</div>

При использовании синтаксиса с двумя значениями, если одно из них задано как visible, это направление переполнения visible будет вести себя как auto, если для другого значения задано не visible и не clip.

Значение hidden

При значении hidden переполняющее содержимое обрезается по границе области внутренних отступов элемента. Полос прокрутки отсутствуют, а обрезанная часть содержимого не видна (то есть она «скрыта»).

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

Если содержимое включает элементы, доступные для фокуса, переход клавишей Tab переносит текущий фокусируемый элемент в видимую область. Содержимое также можно прокручивать программно. Задание значения свойства scrollLeft или scrollTop прокручивает содержимое на указанное расстояние от левого или верхнего края соответственно. Кроме того, для прокрутки можно использовать метод scrollTo().

div {
  overflow: hidden;
}

<div>
  <h2>overflow: hidden;</h2>
</div>
<div>
  <p>
    The <code>overflow</code> property in this example is set to
    <code>hidden</code>. While hidden,
    <a
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#interactive_content"
      >interactive content</a
    >
    can be scrolled into view when focused. Because content overflows, the
    element is a scroll container, even though no scroll bars are present.
    Tabbing will give this
    <input aria-label="input" placeholder="input" /> focus and scroll it into
    view. This content is also programmatically scrollable.
  </p>
</div>

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

Значение clip

При значении clip переполняющее содержимое по умолчанию скрыто, полосы прокрутки отсутствуют, а программная прокрутка невозможна. Элемент не является контейнером прокрутки, и новый контекст форматирования не создаётся. Если обрезанное содержимое включает интерактивные элементы, скрытые элементы, доступные для фокуса, по-прежнему получают клавиатурный фокус, но содержимое не прокручивается в видимую область, из-за чего оно недоступно пользователям клавиатуры.

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

div {
  overflow: clip;
}

<div>
  <h2>overflow: clip;</h2>
</div>
<div>
  <p>
    The <code>overflow</code> property in this example is set to
    <code>clip</code>. When hidden,
    <a
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#interactive_content"
      >interactive content</a
    >
    can NOT be scrolled into view when focused. Overflowing content is clipped
    to the container. No scroll container is created. Tabbing will give this
    <input aria-label="input" placeholder="input" /> focus but will not scroll
    it into view. Keyboard users will not be able to reach this content. This
    content is also not programmatically scrollable.
  </p>
</div>
<fieldset>
  <legend>Select a <code>overflow-clip-margin</code> value</legend>
  <ul>
    <li>
      <label
        ><input type="radio" name="overflow" value="0" /> overflow-clip-margin:
        0;</label
      >
    </li>
    <li>
      <label
        ><input type="radio" name="overflow" value="3em" />
        overflow-clip-margin: 3em;</label
      >
    </li>
  </ul>
</fieldset>

Переполняющее содержимое второго примера обрезано. Переход клавишей Tab к элементу <input> в скрытом содержимом переводит фокус на элемент, но не прокручивает его в видимую область, из-за чего это содержимое недоступно пользователям клавиатуры.

При использовании синтаксиса с двумя значениями, если одно из них задано как clip, это направление переполнения clip будет вести себя как hidden, если для другого значения задано не visible и не clip.

ul {
  list-style-type: none;
}
label {
  font-family: monospace;
}
:has([value="0"]:checked) div {
  overflow-clip-margin: 0;
}
:has([value="3em"]:checked) div {
  overflow-clip-margin: 3em;
}

@supports not (overflow-clip-margin: 0) {
  body::before {
    content: "Your browser doesn't support overflow-clip-margin yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;

    width: 100%;
  }
}

Анимации, управляемые прокруткой

При создании анимаций, управляемых прокруткой, с помощью функции scroll() рассмотрите возможность использования clip вместо hidden, если в обрезанной области нет интерактивного содержимого, кроме случаев, когда вы намеренно хотите создать контейнер прокрутки.

И при hidden, и при clip переполнение обрезается, но overflow: clip не создаёт контейнер прокрутки, поэтому пользовательский агент пропускает обрезанные элементы, поднимаясь по дереву DOM в поисках ближайшего родительского контейнера прокрутки.

Поскольку overflow: hidden создаёт контейнер прокрутки при наличии переполняющего содержимого, можно случайно создать предка прокрутки, который не прокручивается. Используйте clip только в том случае, если уверены, что не обрежете интерактивное содержимое.

div {
  height: 10em;
  width: 15em;
  border: 3px solid;
  padding: 10px;
  background-color: #ededed;
  background-clip: content-box;
}
p {
  font-size: 1.5rem;
  line-height: 1.6;
  font-family: sans-serif;
}
h2 {
  font-family: monospace;
}
body {
  height: 98vh;
  overflow: clip;
  display: flex;
  flex-flow: row wrap;
  gap: 3em;
}

Переполнение замещаемых элементов

Задание overflow для изображений и других замещаемых элементов работает ожидаемым образом в браузерах, поддерживающих CSS Overflow Module Level 4; в предыдущих версиях спецификации замещаемые элементы всегда обрезались по границам контейнера.

Информацию о поддержке в текущих браузерах см. в таблице совместимости браузеров.

Формальное определение

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

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

Доступность

В некоторых браузерах области с прокручиваемым содержимым не могут получать клавиатурный фокус, поэтому пользователи, работающие только с клавиатурой, не могут прокручивать их. Чтобы такие пользователи могли прокручивать контейнер, разрешите элементу получать фокус, задав для контейнера атрибут tabindex="0". Чтобы пользователи программ чтения с экрана понимали контекст, когда контейнер получает фокус, задайте ему подходящую роль WAI-ARIA, например role="region", и доступное имя с помощью атрибута aria-label или aria-labelledby.

Примеры

Демонстрация результатов для различных ключевых слов переполнения

HTML

<div>
  <code>visible</code>
  <p class="visible">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </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;
}

Результат

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

Совместимость браузеров

См. также

• overflow-x, overflow-y
• overflow-block, overflow-clip-margin, overflow-inline
• clip, display, text-overflow, white-space
• Атрибут SVG overflow
• Временные шкалы прогресса прокрутки
• Переполнение CSS
• Анимации CSS, управляемые прокруткой
• Области прокрутки, доступные только с клавиатуры на adrianroselli.com (2022)