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.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.