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

Синтаксис

Формат синтаксиса: [ visible | hidden | clip | scroll | auto ]{1,2}
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> клавишами со стрелками и колесом мыши.

Примеры

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

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

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

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

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

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

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

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

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

 

Спецификация Статус Комментарий
CSS Overflow Module Level 3
Определение 'overflow' в этой спецификации.
Рабочий черновик

Changed syntax to allow one or two keywords instead of only one

CSS Basic Box Model
Определение 'overflow' в этой спецификации.
Рабочий черновик Без изменений
CSS Level 2 (Revision 1)
Определение 'overflow' в этой спецификации.
Рекомендация Initial definition.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
overflowChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания After Firefox 3.6, the overflow property is correctly applied to table group elements (<thead>, <tbody>, <tfoot>).
IE Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания From version 4 to 6, Internet Explorer enlarges an element with overflow: visible (default value) to fit the content inside it. height and width behave like min-height and min-width, respectively.
Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
clip value
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 81
Полная поддержка 81
Нет поддержки 1.5 — 81
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -moz-hidden-unscrollable
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 81
Полная поддержка 81
Нет поддержки 4 — 81
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -moz-hidden-unscrollable
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
Multiple keyword syntax for overflow-x and overflow-yChrome Полная поддержка 68Edge Полная поддержка 79Firefox Полная поддержка 61IE Нет поддержки НетOpera Полная поддержка 55Safari Нет поддержки НетWebView Android Полная поддержка 68Chrome Android Полная поддержка 68Firefox Android Полная поддержка 61Opera Android Полная поддержка 48Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 10.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.
 

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.

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