Может возникнуть ситуация, когда содержимое элемента оказывается больше, чем размеры самого блока. Например в небольшом блоке, ограниченном свойствами width и height не достаточно места для размещения содержимого элемента.
CSS-свойство overflow, позволяет указать, следует ли обрезать содержимое, отображать полосу прокрутки или отображать содержимое за пределами контейнера.
Это свойство может принимать одно из следующих значений: visible (по умолчанию), hidden, scroll, и auto. CSS3 имеет независимые свойства overflow-x и overflow-y для контроля вертикального и горизонтального переполнения контейнера.
div {
width: 250px;
height: 150px;
overflow: scroll;
}| Значение | Описание |
|---|---|
visible |
Контент не обрезается; он будет отображаться вне контейнера, и, таким образом, может перекрывать другое содержимое. Это значение установлено по умолчанию. |
hidden |
Контент, переполняющий контейнер, обрезается; обрезанная часть содержимого будет невидимой. |
scroll |
Контент, переполняющий контейнер, обрезается и при hidden, но предоставляет механизм прокрутки (scroll) для доступа к обрезанному контенту. Полоса прокрутки добавляется всегда, даже если контента недостаточно для обрезания. |
auto |
Работает так же как и scroll, за тем исключением, что полоса прокрутки (scroll) добавляется при необходимости. |
initial |
Устанавливает это свойство в значение по умолчанию. |
inherit |
Если указан, связанный элемент принимает вычисленное значение своего родительского элемента overflow. |
