CSS-свойство overflow-x указывает поведение блока, когда содержимое переполняет область контейнера по оси X. Возможны три варианта: обрезать содержимое, отобразить полосу прокрутки (scroll) или отображать содержимое за пределами блока,
| Значение по умолчанию: | visible |
| Применяется к: | Блочные элементы, строчные и flex-элементы |
| Наследование: | Нет |
| Анимирование: | Нет. Анимируемые свойства |
| Версия: | CSS 2, 3 |
Синтаксис
Синтаксически свойства задаются по следующему шаблону:
overflow-x: visible | hidden | scroll | auto | initial | inheritПримеры написания кода свойства overflow-x:
div {
width: 400px;
height: 300px;
overflow-x: scroll;
}Значения свойств
В следующей таблице описаны значения этого свойства.
| Значение | Описание |
|---|---|
visible |
Контент не обрезается; он будет отображаться вне контейнера, и, таким образом, может перекрывать другое содержимое. Это значение установлено по умолчанию. |
hidden |
Контент, переполняющий контейнер, обрезается; обрезаная часть содержимого будет невидимой. |
scroll |
Контент, переполняющий контейнер, обрезается и при hidden, но предоставляет механизм прокрутки (scroll) для доступа к обрезаному контенту. Полоса прокрутки добавялется всегда, даже если контента недосточно для обрезания. |
auto |
Работает так же как и scroll, за тем исключением, что полоса прокрутки (scroll) добавляется при необходимости. |
initial |
Устанавливает это свойство в значение по умолчанию. |
inherit |
Если указан, связанный элемент принимает вычисленное значение своего родительского элемента overflow-x. |
Поддержка браузеров
Свойство overflow-x поддерживается во всех основных браузерах.
Warning: Internet Explorer 7 и earlier versions don’t support the overflow-x property. IE8 however support this property but requires the Microsoft specific -ms- prefix (e.g. -ms-overflow-x). Supported in IE9 и above.
