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