Тази статия ще демонстрира:
Как да използвате „overflow-hidden“ в Tailwind?
The „препълване-скрит“ клас скрива или изрязва съдържанието, което надвишава размера на този елемент. За да използвате „overflow-hidden“ в Tailwind, създайте HTML програма и приложете „overflow-hidden“ помощния клас с конкретния елемент.
Синтаксис
<елемент клас = 'препълване-скрит ...' > ... < / елемент>
Пример
В този пример ще приложим „препълване-скрит“ помощна програма към
< тяло >
< див клас = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS предоставя различни 'препълване' комунални услуги, като напр 'препълване-автоматично' , 'преливане-превъртане' , 'препълване-скрит' ,
'преливане-видимо' и т.н. Тези помощни програми определят как конкретен елемент обработва съдържание което надвишава
контейнер размер . Всяка помощна програма предлага уникална функционалност, но крайната им цел остава същата, т.е. да контролират
поведението на препълване на избрани елемент.
< / див >
< / тяло >
Тук:
- „препълване-скрит“ клас се използва за скриване на съдържание, което надвишава размера на контейнера.
- “bg-purple-300” клас задава лилав цвят на фона на контейнера.
- 'p-4' клас задава 4 единици подложка от всички страни на контейнера.
- 'mx-16' клас прилага 16-те единици марж върху оста x на контейнера.
- 'mt-5' клас прилага 5-те единици марж към горната част на контейнера.
- „h-32“ клас задава височината на контейнера на 32 единици.
- „обосноваване на текст“ клас оправдава текста на съдържанието вътре в контейнера.
Изход
В горния изход препълващото съдържание не може да се види, което показва, че свойството „overflow-hidden“ е приложено успешно.
Как да използвам „overflow-visible“ в Tailwind?
The „преливане-видимо“ клас позволява превишаващото съдържание да бъде видимо. За да използвате „overflow-visible“ в Tailwind, създайте HTML структура и приложете помощния клас „overflow-visible“ с конкретния елемент.
Синтаксис
<елемент клас = 'преливане-видимо ...' >...< / елемент>Пример
В този пример ще приложим „преливане-видимо“ помощна програма къмконтейнера, за да покаже съдържанието на препълване: < тяло >
< див клас = 'преливане-видимо bg-лилаво-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS предоставя различни 'препълване' комунални услуги, като напр 'препълване-автоматично' , 'преливане-превъртане' , 'препълване-скрит' ,
'преливане-видимо' и т.н. Тези помощни програми определят как конкретен елемент обработва съдържание което надвишава
контейнер размер . Всяка помощна програма предлага уникална функционалност, но крайната им цел остава същата, т.е. да контролират
поведението на препълване на избрани елемент.
< / див >
< / тяло >Тук, в горния кодов фрагмент, „преливане-видимо“ клас се използва за показване на съдържание, което надвишава размера на контейнера.
Изход
Според горния изход, помощната програма „видимо при препълване“ е приложена успешно.
Заключение
За да използвате „overflow-hidden“ и „overflow-visible“ в Tailwind, добавете „препълване-скрит“ и „преливане-видимо“ помощни класове с желаните елементи в HTML програмата. Помощната програма „overflow-hidden“ скрива препълващото се съдържание, докато „overflow-visible“ показва препълващото съдържание на посочения елемент. Тази статия е илюстрирала метода за използване на помощни програми „скрити при преливане“ и „видими при преливане“ в Tailwind.