Переполнение
Используйте эти сокращенные утилиты для быстрой настройки того, как контент выходит за пределы элемента.
На этой странице
Переполнение
Настройте свойство overflow
на лету с четырьмя значениями и классами по умолчанию. Эти классы по умолчанию не реагируют.
This is an example of using
.overflow-auto
on an element with set width and height dimensions. By design, this content will vertically scroll.
This is an example of using
.overflow-hidden
on an element with set width and height dimensions.
This is an example of using
.overflow-visible
on an element with set width and height dimensions.
This is an example of using
.overflow-scroll
on an element with set width and height dimensions.
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
overflow-x
Настройте свойство overflow-x
, чтобы повлиять на переполнение содержимого по горизонтали.
.overflow-x-auto
example on an element with set width and height dimensions.
.overflow-x-hidden
exampleon an element with set width and height dimensions.
.overflow-x-visible
example on an element with set width and height dimensions.
.overflow-x-scroll
example on an element with set width and height dimensions.
<div class="overflow-x-auto">...</div>
<div class="overflow-x-hidden">...</div>
<div class="overflow-x-visible">...</div>
<div class="overflow-x-scroll">...</div>
overflow-y
Настройте свойство overflow-y
, чтобы повлиять на переполнение содержимого по вертикали.
.overflow-y-auto
example on an element with set width and height dimensions.
.overflow-y-hidden
example on an element with set width and height dimensions.
.overflow-y-visible
example on an element with set width and height dimensions.
.overflow-y-scroll
example on an element with set width and height dimensions.
<div class="overflow-y-auto">...</div>
<div class="overflow-y-hidden">...</div>
<div class="overflow-y-visible">...</div>
<div class="overflow-y-scroll">...</div>
Используя переменные Sass, Вы можете настроить утилиты переполнения, изменив переменную $overflows
в _variables.scss
.
Sass
Утилиты API
Утилиты переполнения объявлены в нашем API утилит в scss/_utilities.scss
. Узнайте, как использовать API утилит.
"overflow": (
property: overflow,
values: auto hidden visible scroll,
),
"overflow-x": (
property: overflow-x,
values: auto hidden visible scroll,
),
"overflow-y": (
property: overflow-y,
values: auto hidden visible scroll,
),