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

​Основы использования

​Отображение содержимого, которое выходит за пределы

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

Andrew Alfred Technical advisor

<div class="overflow-visible ..."></div>

​Скрытие переполняющегося содержимого

Используйте утилиту overflow-hidden, чтобы обрезать любой контент внутри элемента, который выходит за пределы этого элемента.

Andrew Alfred Technical advisor

<div class="overflow-hidden ..."></div>

​Прокрутка при необходимости

Используйте утилиту overflow-auto, чтобы добавить полосы прокрутки к элементу в случае, если его содержимое выходит за пределы этого элемента. В отличие от overflow-scroll, которая всегда показывает полосы прокрутки, эта утилита будет показывать их только в том случае, если прокрутка необходима.

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div class="overflow-auto ..."></div>

​Скролл по горизонтали при необходимости

Используйте утилиту overflow-x-auto, чтобы при необходимости разрешить горизонтальную прокрутку.

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-auto ..."></div>

​Скролл по вертикали при необходимости

Используйте утилиту overflow-y-auto, чтобы при необходимости разрешить вертикальную прокрутку.

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div class="overflow-y-auto h-32 ..."></div>

​Скролл по горизонтали всегда

Используйте утилиту overflow-x-scroll, чтобы разрешить горизонтальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-scroll ..."></div>

​Скролл по вертикали всегда

Используйте утилиту overflow-y-scroll, чтобы разрешить вертикальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

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

​Скролл во всех направлениях

Используйте утилиту overflow-scroll, чтобы добавить полосы прокрутки к элементу. В отличие от overflow-auto, которая показывает полосы прокрутки только в случае необходимости, эта утилита показывает их всегда. Обратите внимание, что некоторые операционные системы (например, macOS) скрывают ненужные полосы прокрутки независимо от этого параметра.

<div class="overflow-scroll ..."></div>

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:overflow-scroll, чтобы применять утилиту overflow-scroll только при hover.

<div class="overflow-auto hover:overflow-scroll">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:overflow-scroll, чтобы применить утилиту overflow-scroll только на экранах среднего размера и выше.

<div class="overflow-auto md:overflow-scroll">
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.