Эта запись проиллюстрирует:
Как использовать «переполнение-авто» в Tailwind?
“ переполнение-авто » автоматически добавляет полосы прокрутки при переполнении содержимого. Он не показывает полосу прокрутки, если содержимое не переполняется. Чтобы использовать «overflow-auto» в Tailwind, создайте HTML-программу и добавьте « переполнение-авто » к нужному элементу в HTML-программе.
Синтаксис
< элемент сорт '=' 'переполнение-авто...' > ... элемент >
Пример
В этом примере мы применим «переполнение-авто» полезность для
контейнер: < тело >
< див сорт '=' 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS предоставляет различные утилиты «переполнения», такие как «переполнение-авто», «переполнение-прокрутка», «переполнение-скрыто», «переполнение-видимое» и т. д. Эти утилиты определяют, как конкретный элемент обрабатывает содержимое, выходящее за пределы контейнера. размер. Каждая утилита предлагает уникальную функциональность, однако их конечная цель остается неизменной, то есть контролировать поведение выбранного элемента при переполнении.
< / див >
< / тело >
- «переполнение-авто» Класс используется для добавления полос прокрутки в контейнер и показывать их только тогда, когда необходима прокрутка.
- «бг-фиолетовый-300» class устанавливает фиолетовый цвет в цвет фона контейнера.
- «п-4» класс устанавливает 4 единицы отступа со всех сторон контейнера.
- «МХ-16» класс применяет 16 единиц поля по оси X контейнера.
- «МТ-5» class применяет 5 единиц поля к верхней части контейнера.
- «ч-32» class устанавливает высоту контейнера в 32 единицы.
- «выравнивание по тексту» class выравнивает текст содержимого внутри контейнера.
Выход
Приведенный выше вывод показывает вертикальную полосу прокрутки, когда текст переполняется. Это указывает на то, что «переполнение-авто» утилита была успешно применена к элементу.
Как использовать «overflow-scroll» в Tailwind?
Эта утилита добавляет полосы прокрутки в контейнер и всегда показывает их, даже если прокрутка не нужна. Это также позволяет прокручивать во всех направлениях. Чтобы использовать «overflow-scroll» в Tailwind, создайте HTML-программу и добавьте «переполнение-прокрутка» служебный класс для конкретного элемента в программе HTML.
Синтаксис
< элемент сорт '=' 'переполнение-прокрутка...' > ... элемент > Пример
В этом примере мы применим «переполнение-прокрутка» полезность для
< див сорт '=' 'переполнение-прокрутка bg-purple-300 p-4 mx-16 mt-5 h-32 текстовое выравнивание' >
Tailwind CSS предоставляет различные утилиты «переполнения», такие как «переполнение-авто», «переполнение-прокрутка», «переполнение-скрыто», «переполнение-видимое» и т. д. Эти утилиты определяют, как конкретный элемент обрабатывает содержимое, выходящее за пределы контейнера. размер. Каждая утилита предлагает уникальную функциональность, однако их конечная цель остается неизменной, то есть контролировать поведение выбранного элемента при переполнении.
< / див >
< / тело >
Здесь «переполнение-прокрутка» Класс используется для добавления полос прокрутки в
контейнер и всегда показывает их.Выход
В приведенном выше выводе можно увидеть как вертикальные, так и горизонтальные полосы прокрутки. Это указывает на то, что «переполнение-прокрутка» утилита была успешно применена к элементу.
Заключение
Чтобы использовать «overflow-auto» и «overflow-scroll» в Tailwind, необходимо добавить «переполнение-авто» и «переполнение-прокрутка» служебные классы к желаемым элементам в программе HTML. Оба служебных класса добавляют полосы прокрутки к указанным элементам. Однако класс «overflow-auto» показывает полосы прокрутки только тогда, когда необходима прокрутка, в то время как класс «overflow-scroll» показывает их всегда, даже если прокрутка не нужна. В этой статье проиллюстрированы методы использования «overflow-auto» и «overflow-scroll» в Tailwind.