Tento článok ukáže:
Ako používať „overflow-hidden“ v Tailwinde?
The „pretečenie skryté“ class skrýva alebo orezáva obsah, ktorý presahuje veľkosť tohto prvku. Ak chcete použiť „overflow-hidden“ v Tailwinde, vytvorte program HTML a použite triedu nástroja „overflow-hidden“ s konkrétnym prvkom.
Syntax
Príklad
V tomto príklade použijeme „pretečenie skryté“ pomôcka do kontajnera
< telo >
< div trieda = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS poskytuje rôzne 'pretečenie' inžinierske siete, ako napr 'overflow-auto' , 'overflow-scroll' , 'pretečenie-skryté' ,
'pretekanie-viditeľné' atď. Tieto nástroje určujú, ako konkrétny prvok spracováva obsahu ktorá presahuje
kontajner veľkosť . Každá utilita ponúka jedinečnú funkcionalitu, avšak ich konečný cieľ zostáva rovnaký, teda ovládanie
správanie pri pretečení vybraný element.
< / div >
< / telo >
Tu:
- „pretečenie skryté“ trieda sa používa na skrytie obsahu, ktorý presahuje veľkosť kontajnera .
- 'bg-purple-300' trieda nastaví fialovú farbu na pozadie kontajnera.
- 'p-4' trieda nastavuje 4 jednotky výplne na všetky strany kontajnera.
- 'mx-16' triedy aplikuje 16 jednotiek okraja na os x kontajnera.
- 'mt-5' trieda aplikuje 5 jednotiek okraja na vrch nádoby.
- 'h-32' triedy nastavuje výšku kontajnera na 32 jednotiek.
- 'zarovnať text' class zarovná text obsahu vnútri kontajnera.
Výkon
Vo vyššie uvedenom výstupe nie je vidieť pretekajúci obsah, čo znamená, že vlastnosť „overflow-hidden“ bola úspešne použitá.
Ako používať „pretečenie-viditeľné“ v Tailwinde?
The „pretečenie viditeľné“ trieda umožňuje zviditeľnenie presahujúceho obsahu. Ak chcete použiť „overflow-visible“ v Tailwinde, vytvorte štruktúru HTML a aplikujte pomocnú triedu „overflow-visible“ s konkrétnym prvkom.
Syntax
Príklad
V tomto príklade použijeme „pretečenie viditeľné“ pomôcka do kontajnerana zobrazenie pretečeného obsahu: < telo >
< div trieda = 'pretečenie-viditeľné bg-purple-300 p-4 mx-16 mt-5 h-32 text-zarovnať' >
Tailwind CSS poskytuje rôzne 'pretečenie' inžinierske siete, ako napr 'overflow-auto' , 'overflow-scroll' , 'pretečenie-skryté' ,
'pretečenie-viditeľné' atď. Tieto nástroje určujú, ako konkrétny prvok spracováva obsahu ktorá presahuje
kontajner veľkosť . Každá utilita ponúka jedinečnú funkcionalitu, avšak ich konečný cieľ zostáva rovnaký, teda ovládanie
správanie pri pretečení vybraný element.
< / div >
< / telo >Tu, vo vyššie uvedenom útržku kódu, „pretečenie viditeľné“ trieda sa používa na zobrazenie obsahu, ktorý presahuje veľkosť kontajnera.
Výkon
Podľa vyššie uvedeného výstupu bola úspešne aplikovaná utilita „overflow-visible“.
Záver
Ak chcete v Tailwinde použiť „overflow-hidden“ a „overflow-visible“, pridajte „pretečenie skryté“ a „pretečenie viditeľné“ pomocné triedy s požadovanými prvkami v programe HTML. Nástroj „overflow-hidden“ skryje pretekajúci obsah, zatiaľ čo nástroj „overflow-visible“ zobrazuje pretekajúci obsah špecifikovaného prvku. Tento článok je príkladom spôsobu používania nástrojov „overflow-hidden“ a „overflow-visible“ v Tailwinde.