overflow
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 7.0+ | 1.0+ |
Описание
Когда для элементов применяются свойства height (высота) и width (ширина), задающие точный размер, то появляется вероятность переполнения элемента его контентом, то есть контент может занимать больше места, чем было зарезервировано содержащим его элементом.
CSS свойство overflow позволяет заранее определить, что будет предприниматься, если содержимое элемента превзойдет его размер. По умолчанию, весь контент будет видимым, даже если он в несколько раз превзойдет по объему размеры элемента, но это можно легко изменить, используя подходящее значение для свойства.
| Значение по умолчанию: | visible |
|---|---|
| Применяется: | к незамещаемым блочным и строчным элементам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.overflow="scroll" |
Синтаксис
overflow: visible|hidden|scroll|auto|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| visible | Указывает, что при переполнении элемента содержимым, оно не будет обрезаться, а просто выйдет за рамки. |
| hidden | Указывает, что контент, который не помещается в элемент, будет обрезан(обрезанная часть будет невидимая). |
| scroll | Указывает, что контент, который не помещается в элемент, будет обрезан, но для просмотра обрезанной части, можно будет воспользоваться полосой прокрутки. |
| auto | При переполнении элемента содержимым, полосы прокрутки добавляются автоматически. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
CSS Свойство:
overflow:
Результат:
CSS Код:
#myDIV {
width: 150px;
height: 200px;
overflow: visible;
}
width: 150px;
height: 200px;
overflow: visible;
}