Tento článek ukáže:
Jak v Tailwindu používat „overflow-hidden“?
The 'přetečení-skryté' class skryje nebo ořízne obsah, který přesahuje velikost tohoto prvku. Chcete-li v Tailwindu využít „overflow-hidden“, vytvořte HTML program a použijte třídu nástroje „overflow-hidden“ s konkrétním prvkem.
Syntax
Příklad
V tomto příkladu použijeme 'přetečení-skryté' nástroj ke kontejneru
< tělo >
< div třída = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS poskytuje různé 'přetékat' inženýrské sítě, jako např 'přetečení-auto' , 'přetečení-rolování' , 'přetečení-skryté' ,
'přetečení-viditelné' atd. Tyto nástroje určují, jak konkrétní prvek nakládá s obsah která přesahuje
kontejner velikost . Každý nástroj nabízí jedinečnou funkcionalitu, jejich konečný cíl však zůstává stejný, tedy ovládání
chování při přetečení vybraný živel.
< / div >
< / tělo >
Tady:
- 'přetečení-skryté' class se používá ke skrytí obsahu, který přesahuje velikost kontejneru .
- 'bg-purple-300' třída nastaví fialovou barvu na pozadí kontejneru.
- 'p-4' třída nastavuje 4 jednotky vycpávky na všechny strany kontejneru.
- 'mx-16' třída aplikuje 16 jednotek okraje na osu x kontejneru.
- 'mt-5' třída aplikuje 5 jednotek okraje na horní část kontejneru.
- 'h-32' třída nastavuje výšku kontejneru na 32 jednotek.
- 'text-zarovnat' class zarovnává text obsahu uvnitř kontejneru.
Výstup
Ve výše uvedeném výstupu není vidět přetékající obsah, což znamená, že vlastnost „overflow-hidden“ byla úspěšně použita.
Jak používat „overflow-visible“ v Tailwindu?
The 'přetečení-viditelné' třída umožňuje zviditelnění překračujícího obsahu. Chcete-li v Tailwindu využít „overflow-visible“, vytvořte strukturu HTML a použijte třídu nástroje „overflow-visible“ s konkrétním prvkem.
Syntax
Příklad
V tomto příkladu použijeme 'přetečení-viditelné' obslužný program do kontejneruk zobrazení přetečeného obsahu: < tělo >
< div třída = 'přetečení-viditelné bg-purple-300 p-4 mx-16 mt-5 h-32 text-zarovnat' >
Tailwind CSS poskytuje různé 'přetékat' inženýrské sítě, jako např 'přetečení-auto' , 'přetečení-rolování' , 'přetečení-skryté' ,
'přetečení-viditelné' atd. Tyto nástroje určují, jak konkrétní prvek nakládá s obsah která přesahuje
kontejner velikost . Každá utilita nabízí unikátní funkcionalitu, nicméně jejich konečný cíl zůstává stejný, tedy ovládání
chování při přetečení vybraný živel.
< / div >
< / tělo >Zde, ve výše uvedeném úryvku kódu, 'přetečení-viditelné' třída se používá k zobrazení obsahu, který přesahuje velikost kontejneru.
Výstup
Podle výše uvedeného výstupu byla úspěšně použita utilita „overflow-visible“.
Závěr
Chcete-li v Tailwindu použít „overflow-hidden“ a „overflow-viditelné“, přidejte 'přetečení-skryté' a 'přetečení viditelné' pomocné třídy s požadovanými prvky v programu HTML. Obslužný program „overflow-hidden“ skryje přetékající obsah, zatímco nástroj „overflow-visible“ zobrazuje přetékající obsah zadaného prvku. Tento článek je příkladem způsobu použití nástrojů „overflow-hidden“ a „overflow-visible“ v Tailwindu.