3.9 KiB
title | localeTitle |
---|---|
Overflow | перелив |
перелив
Свойство overflow
указывает, что произойдет, если содержимое переполняет поле элемента (это свойство работает только для элементов блока с указанной высотой).
Это свойство указывает, следует ли клип-контент или добавлять полосы прокрутки, когда содержимое элемента слишком велико, чтобы вписаться в указанную область.
Например, заданный элемент уровня блока ( <div>
), установленный на ширину 300 пикселей, содержит изображение шириной 400 пикселей. Изображение будет выходить из div и быть видимым по умолчанию. Однако, если значение переполнения установлено в скрытое, изображение будет отключено на 300 пикселей.
Значения
visible
: Это значение по умолчанию для свойства. Содержимое не обрезается, если оно больше, чем поле.hidden
: переполненное содержимое будет скрыто.scroll
: похоже на скрытый, но пользователи смогут прокручивать скрытый контент.auto
: Если содержимое выходит за пределы его поля, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видимой для пользователей, чтобы прочитать остальную часть содержимого.initial
: Использует значение по умолчанию, которое видно.inherit
: Устанавливает переполнение для значения его родительского элемента.
Примеры
Видимых:
.box-element { overflow: visible; }
Скрытые:
.box-element { overflow: hidden; }
Прокрутка:
.box-element { overflow: scroll; }
Авто:
.box-element { overflow: auto; }
переполнение-x и переполнение-y
overflow-x
: позволяет пользователю прокручивать содержимое, которое выходит за пределы высоты элемента box.overflow-y
: позволяет пользователю прокручивать содержимое, выходящее за пределы ширины окна.
.box-element {
overflow-x: scroll;
overflow-y: auto;
}
.box-element
будет выглядеть так:
Если содержимое переполняет ось Y, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видимой для пользователей, чтобы прочитать остальную часть содержимого.
Дополнительная информация:
CSS-трюки: переполнение