Макет
overflow
Утилиты для управления тем, как элемент обрабатывает содержимое, которое слишком велико для контейнера.
| Class | Styles |
|---|---|
overflow-auto | overflow: auto; |
overflow-hidden | overflow: hidden; |
overflow-clip | overflow: clip; |
overflow-visible | overflow: visible; |
overflow-scroll | overflow: scroll; |
overflow-x-auto | overflow-x: auto; |
overflow-y-auto | overflow-y: auto; |
overflow-x-hidden | overflow-x: hidden; |
overflow-y-hidden | overflow-y: hidden; |
overflow-x-clip | overflow-x: clip; |
overflow-y-clip | overflow-y: clip; |
overflow-x-visible | overflow-x: visible; |
overflow-y-visible | overflow-y: visible; |
overflow-x-scroll | overflow-x: scroll; |
overflow-y-scroll | overflow-y: scroll; |
Примеры
Показ переполняющегося содержимого
Используйте утилиту overflow-visible для предотвращения обрезки содержимого внутри элемента:
<div class="overflow-visible ..."> <!-- ... --></div>Обратите внимание, что любое содержимое, которое переполняет границы элемента, будет видимым.
Скрытие переполняющегося содержимого
Используйте утилиту overflow-hidden для обрезки любого содержимого внутри элемента, которое переполняет границы этого элемента:
<div class="overflow-hidden ..."> <!-- ... --></div>Прокрутка при необходимости
Используйте утилиту overflow-auto для добавления полос прокрутки к элементу в случае, если его содержимое переполняет границы этого элемента:
Прокрутите вертикально
<div class="overflow-auto ..."> <!-- ... --></div>В отличие от overflow-scroll, который всегда показывает полосы прокрутки, эта утилита будет показывать их только при необходимости прокрутки.
Горизонтальная прокрутка при необходимости
Используйте утилиту overflow-x-auto для разрешения горизонтальной прокрутки при необходимости:
Прокрутите горизонтально
Эндрю
Эмили
Уитни
Дэвид
Кристин
Сара<div class="overflow-x-auto ..."> <!-- ... --></div>Скрутка вертикально при необходимости
Используйте утилиту overflow-y-auto для разрешения вертикальной прокрутки при необходимости:
Прокрутите вертикально
<div class="h-32 overflow-y-auto ..."> <!-- ... --></div>Горизонтальная прокрутка всегда
Используйте утилиту overflow-x-scroll для разрешения горизонтальной прокрутки и всегда показывать полосы прокрутки, если они не видны из-за настроек операционной системы:
Прокрутите горизонтально
ЭндрюЭмилиУитниДэвидКристинСара<div class="overflow-x-scroll ..."> <!-- ... --></div>Вертикальная прокрутка всегда
Используйте утилиту overflow-y-scroll для разрешения вертикальной прокрутки и всегда показывать полосы прокрутки, если они не видны из-за настроек операционной системы:
Прокрутите вертикально
<div class="overflow-y-scroll ..."> <!-- ... --></div>Прокрутка во всех направлениях
Используйте утилиту overflow-scroll для добавления полос прокрутки к элементу:
Прокрутите вертикально и горизонтально
<div class="overflow-scroll ..."> <!-- ... --></div>В отличие от overflow-auto, который показывает полосы прокрутки только при необходимости, эта утилита всегда их показывает. Обратите внимание, что некоторые операционные системы (например, macOS) скрывают ненужные полосы прокрутки независимо от этого параметра.
Адаптивный дизайн
Префикс an overflow утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="overflow-auto md:overflow-scroll ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.