overflow

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Резюме

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

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

Начальное значениеvisible
Применяется кBlock-containers, flex containers, and grid containers
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typediscrete

Синтаксис

Формат синтаксиса (en-US): 

overflow = 
  <'overflow-block'>{1,2} (en-US)

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 (en-US) и overflow-y (en-US) предпочтительнее.

-moz-scrollbars-vertical

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

-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

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

BCD tables only load in the browser

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.

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