Bootstrap Overflow (Переполнение)

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

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

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

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

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

Пример:

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

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

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

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

overflow-x

Настройте свойство overflow-x таким образом, чтобы оно влияло на переполнение содержимого по горизонтали.

<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-x-auto пример на элементе

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

.overflow-x-hidden пример

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

.overflow-x-visible пример

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

.overflow-x-scroll пример на элементе

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

overflow-y

Настройте свойство overflow-y таким образом, чтобы оно влияло на переполнение содержимого по вертикали.

<div class="overflow-y-auto">...</div>
<div class="overflow-y-hidden">...</div>
<div class="overflow-y-visible">...</div>
<div class="overflow-y-scroll">...</div>

Пример:

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

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

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

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

Используя переменные Sass, вы можете настроить утилиты overflow, изменив $overflows переменную в _variables.scss.

CSS

API утилит Sass

Утилиты Overflow объявлены в нашем utilities API в scss/_utilities.scss. Узнайте, как использовать utilities 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,
),