overflow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Резюме

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

Использование свойства overflow со значениями, отличными от visible, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden, элемент, возможно, придётся прокрутить.

Начальное значениеvisible
Применяется кBlock-containers, flex containers, and grid containers
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
  • overflow-x: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
  • overflow-y: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
Animation typediscrete

Синтаксис

Формат синтаксиса: 

overflow = 
  <'overflow-block'>{1,2}  

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

css
overflow: visible
overflow: hidden
overflow: scroll
overflow: auto

overflow: inherit

Значения

visible

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

hidden

Контент обрезается, без предоставления прокрутки.

scroll

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

auto

Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

Расширения Mozilla

-moz-scrollbars-none

Используйте overflow:hidden.

-moz-scrollbars-horizontal

Использование overflow-x и overflow-y предпочтительнее.

-moz-scrollbars-vertical

Использование overflow-x и overflow-y предпочтительнее.

-moz-hidden-unscrollable

Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и <html>, <body> клавишами со стрелками и колесом мыши.

Примеры

css
p {
  width: 12em;
  height: 6em;
  border: dotted;
  overflow: visible; /* содержимое не обрезается */
}

visible (default) Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

css
p {
  overflow: hidden; /* полосы прокрутки не предоставляются */
}

overflow: hidden Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

css
p {
  overflow: scroll; /* всегда показывать полосы прокрутки */
}

overflow: scroll Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

css
p {
  overflow: auto; /* добавить полосы прокрутки, если это необходимо */
}

overflow: auto Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

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

Specification
CSS Overflow Module Level 3
# propdef-overflow
Scalable Vector Graphics (SVG) 2
# OverflowAndClipProperties

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

Firefox (Gecko) Примечания

Из-за Firefox 3.6 (Gecko 1.9.2), свойство overflow неверно применяется к элементам table-group (<thead> , <tbody> , <tfoot>). Это поведение будет исправлено в следующих версиях.

Internet Explorer Примечания

Internet Explorer 4 - 6 увеличивает элемент с overflow:visible (значение по умолчанию), чтобы заполнить содержимое в нём. height/width действуют подобно min-height/min-width.

Смотрите также