В этой статье будет показан метод применения точек останова и медиа-запросов к утилитам «переполнения» в Tailwind CSS.
Как использовать точки останова и медиа-запросы с «переполнением» в Tailwind?
Чтобы применить определенные точки останова и медиа-запросы к утилитам переполнения в Tailwind, создайте структуру HTML. Затем используйте « Мэриленд ' или ' LG ” точки останова с нужным «переполнение-<значение>» утилиты для управления поведением переполнения указанного элемента на разных размерах экрана. Далее измените размер экрана веб-страницы для проверки.
Пример
В этом примере мы будем использовать «МД» точка останова с «переполнение-прокрутка» полезность в
контейнер, чтобы добавить к нему полосы прокрутки и всегда отображать их на экране среднего размера: < тело >
< див сорт '=' «переполнение-авто md: переполнение-прокрутка bg-purple-300 p-4 mx-16 mt-5 h-36 текстовое выравнивание» >
Tailwind CSS предоставляет различные утилиты «переполнения», такие как
«переполнение-авто», «переполнение-прокрутка», «переполнение-скрыто», «переполнение-видимое»
и т. д. Эти утилиты определяют, как конкретный элемент обрабатывает содержимое
что превышает размер контейнера. Каждая утилита предлагает уникальную функциональность,
однако их конечная цель остается прежней, т. е. контролировать переполнение
поведение выбранного элемента.
< / див >
< / тело >
Здесь:
- «переполнение-авто» Класс используется для добавления полос прокрутки в контейнер и показывать их только тогда, когда необходима прокрутка.
- «md: переполнение-прокрутка» класс добавляет полосы прокрутки и всегда показывает их на «МД» точка останова (средний размер экрана).
Выход:
Согласно приведенному выше выводу, точки останова и медиа-запросы были успешно применены к утилитам «переполнения».
Заключение
Для применения точек останова и медиа-запросов к утилитам «переполнения» в Tailwind используйте « см », « Мэриленд ' или ' LG ” точки останова с желаемым “ переполнение-<значение> » утилиты в программе HTML. Эти точки останова управляют поведением переполнения указанного элемента на разных размерах экрана. В этой статье проиллюстрирован пример применения определенных точек останова и медиа-запросов к утилитам «переполнения» в Tailwind.