Overflow — Tailwind CSS

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

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

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

Эндрю Альфред Технический консультант

​Скрытие содержимого, выходящего за пределы

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

Эндрю Альфред Технический консультант

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

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

Эндрю Альфред Технический консультант

Дебра Хьюстон

Аналитик

Джейн Уайт Директор по маркетингу

Рэй Флинт Технический советник

Горизонтальная прокрутка при необходимости

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

Эндрю

Эмили

Уитни

Дэвид

2in

0 Сара

Вертикальная прокрутка при необходимости

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

Эндрю Альфред Технический консультант

Дебра Хьюстон Аналитик

Джейн Уайт Директор по маркетингу

Рэй Флинт Технический советник

Горизонтальная прокрутка всегда

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

Всегда вертикальная прокрутка

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

​Прокрутка во всех направлениях

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

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

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

Tailwind позволяет условно применять служебные классы в различных состояниях, используя модификаторы вариантов.

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

 <дел>

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

​Точки останова и медиа-запросы

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

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

 <дел>