overflow
Резюме
Свойство CSS overflow
определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.
Использование свойства overflow
со значениями, отличными от visible
, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop
для соответствующего HTML-элемента, даже если overflow
имеет значение hidden
, элемент, возможно, придётся прокрутить.
Начальное значение | visible |
---|---|
Применяется к | Block-containers, flex containers, and grid containers |
Наследуется | нет |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | discrete |
Синтаксис
Значения
visible
-
По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
-
Контент обрезается, без предоставления прокрутки.
scroll
-
Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.
auto
-
Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.
Расширения Mozilla
-moz-scrollbars-none
-
Используйте
overflow:hidden
. -moz-scrollbars-horizontal
Устарело-
Использование
overflow-x
иoverflow-y
предпочтительнее. -moz-scrollbars-vertical
Устарело-
Использование
overflow-x
иoverflow-y
предпочтительнее. -
Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку 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.
Спецификации
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
.
Смотрите также
- Связанные свойства CSS:
text-overflow
,white-space
,overflow-x
,overflow-y
,overflow-inline
,overflow-block
,clip
,display