overflow

Резюме

Свойство 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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overflow
auto
clip
hidden
Multiple keyword syntax for overflow-x and overflow-y
scroll
visible

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

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.

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