overflow

Резюме

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

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

Initial value	`visible`
Applies to	non-replaced block-level elements and non-replaced inline-block elements
Inherited	no
Media	visual
Computed value	as specified
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

Синтаксис

Формат синтаксиса: visible | hidden | scroll | auto

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; /* content is not clipped */ 
}

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

p { overflow: hidden; /* no scrollbars are provided */ }

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

p { overflow: scroll; /* always show scrollbars */ }

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

p { overflow: auto; /* append scrollbars if necessary */ }

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

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

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

Свойство	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Основная поддержка	1.0	1.0 (1.7 или ранее)	4.0	7.0	1.0 (85)

Свойство	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Основная поддержка	?	1.0 (1)	?	?	?

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, clip, display