Переполнение

Используйте эти сокращенные утилиты для быстрой настройки того, как контент выходит за пределы элемента.

На этой странице

Переполнение

Настройте свойство overflow на лету с четырьмя значениями и классами по умолчанию. Эти классы по умолчанию не реагируют.

Это пример использования .overflow-auto для элемента с заданными размерами ширины и высоты. По дизайну этот контент будет прокручиваться вертикально.

Это пример использования .overflow-hidden для элемента с заданными размерами ширины и высоты.

Это пример использования .overflow-visible для элемента с заданными размерами ширины и высоты.

Это пример использования .overflow-scroll для элемента с заданными размерами ширины и высоты.

<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 для элемента

с заданными размерами ширины и высоты.

Пример .overflow-x-hidden example

для элемента с заданными размерами ширины и высоты.

Пример .overflow-x-visible example

для элемента с заданными размерами ширины и высоты.

Пример .overflow-x-scroll для элемента

с заданными размерами ширины и высоты.

<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 для элемента с заданными размерами ширины и высоты.

Пример .overflow-y-hidden для элемента с заданными размерами ширины и высоты.

Пример .overflow-y-visible для элемента с заданными размерами ширины и высоты.

Пример .overflow-y-scroll для элемента с заданными размерами ширины и высоты.

<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.

CSS

Sass API утилиты

Утилиты переполнения объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

scss/_utilities.scss

"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,
),