This page was translated from English by the community.Learn more and join the MDN Web Docs community.
overflow
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Резюме
Свойство CSSoverflow определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.
Использование свойстваoverflow со значениями, отличными отvisible, (значение, принятое по умолчанию), создаёт новыйблочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибутаscrollTop для соответствующего HTML-элемента, даже еслиoverflow имеет значениеhidden, элемент, возможно, придётся прокрутить.
| Начальное значение | visible |
|---|---|
| Применяется к | Block-containers, flex containers, and grid containers |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:
|
| Animation type | discrete |
Синтаксис
overflow =
<'overflow-block'>{1,2}
<overflow-block> =
visible|
hidden|
clip|
scroll|
auto
overflow: visibleoverflow: hiddenoverflow: scrolloverflow: autooverflow: 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: hiddenSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: scroll; /* всегда показывать полосы прокрутки */}overflow: scrollSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: auto; /* добавить полосы прокрутки, если это необходимо */}overflow: autoSed 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 |
Совместимость с браузерами
Loading…
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