Ez a cikk bemutatja:
- Hogyan kell használni a „túlcsordulás-rejtett” kifejezést a Tailwindben?
- Hogyan kell használni a „túlcsordulás-látható” funkciót a Tailwindben?
Hogyan kell használni a „túlcsordulás-rejtett” kifejezést a Tailwindben?
A „túlcsordulás-rejtett” osztály elrejti vagy kivágja az elem méretét meghaladó tartalmat. A Tailwind „overflow-hidden” funkciójának használatához hozzon létre egy HTML-programot, és alkalmazza az „overflow-hidden” segédprogram osztályt az adott elemmel.
Szintaxis
Példa
Ebben a példában a „túlcsordulás-rejtett” segédprogram a
< test >
< div osztály = 'túlcsordulás-rejtett bg-lila-300 p-4 mx-16 mt-5 h-32 text-justify' >
A Tailwind CSS különféle lehetőségeket kínál 'túlcsordulás' közművek, mint pl 'overflow-auto' , 'túlcsordulás-görgetés' , 'túlcsordulás-rejtett' ,
'túlcsordulás-látható' stb. Ezek a segédprogramok határozzák meg, hogy egy adott elem hogyan kezeli a tartalom amely meghaladja a
tartály méret . Mindegyik segédprogram egyedi funkcionalitást kínál, azonban a végcéljuk ugyanaz, azaz a vezérlés
a túlcsordulási viselkedés a kiválasztott elem.
< / div >
< / test >
Itt:
- „túlcsordulás-rejtett” osztály a tároló méretét meghaladó tartalom elrejtésére szolgál.
- 'bg-lila-300' osztály a lila színt állítja be a tároló hátterére.
- 'p-4' osztály 4 egységnyi párnázást tartalmaz a konténer minden oldalán.
- 'mx-16' osztály a 16 egységnyi margót alkalmazza a konténer x tengelyére.
- 'mt-5' osztály az 5 egységnyi margót a tartály tetejére alkalmazza.
- 'h-32' osztály a konténer magasságát 32 egységre állítja be.
- „szöveges igazítás” osztály sorkizárja a tárolón belüli tartalom szövegét.
Kimenet
A fenti kimenetben nem látható a túlcsordult tartalom, ami azt jelzi, hogy a „túlcsordulás-rejtett” tulajdonság sikeresen alkalmazásra került.
Hogyan kell használni a „túlcsordulás-látható” funkciót a Tailwindben?
A „túlcsordulás-látható” osztály lehetővé teszi a túlzott tartalom láthatóságát. A Tailwind „túlcsordulás-látható” funkciójának használatához hozzon létre egy HTML-struktúrát, és alkalmazza a „túlcsordulás-látható” segédprogram osztályt az adott elemhez.
Szintaxis
Példa
Ebben a példában a „túlcsordulás-látható” segédprogram atárolóhoz a túlcsordulás tartalom megjelenítéséhez: < test >
< div osztály = 'túlcsordulás-látható bg-lila-300 p-4 mx-16 mt-5 h-32 text-justify' >
A Tailwind CSS különféle lehetőségeket kínál 'túlcsordulás' közművek, mint pl 'overflow-auto' , 'túlcsordulás-görgetés' , 'túlcsordulás-rejtett' ,
'túlcsordulás-látható' stb. Ezek a segédprogramok határozzák meg, hogy egy adott elem hogyan kezeli a tartalom amely meghaladja a
tartály méret . Mindegyik segédprogram egyedi funkcionalitást kínál, azonban a végcéljuk ugyanaz, azaz a vezérlés
a túlcsordulási viselkedés a kiválasztott elem.
< / div >
< / test >Itt, a fenti kódrészletben a „túlcsordulás-látható” osztály a tároló méretét meghaladó tartalom megjelenítésére szolgál.
Kimenet
A fenti eredmény szerint a „túlcsordulás-látható” segédprogram sikeresen alkalmazásra került.
Következtetés
A „túlcsordulás-rejtett” és a „túlcsordulás-látható” használatához a Tailwindben, adja hozzá a „túlcsordulás-rejtett” és „túlcsordulás-látható” segédprogram osztályok a kívánt elemekkel a HTML programban. A „túlcsordulás-rejtett” segédprogram elrejti a túlcsordult tartalmat, míg a „túlcsordulás-látható” a megadott elem túlcsordult tartalmát mutatja. Ez a cikk példát mutat be a „túlcsordulás-rejtett” és „túlcsordulás-látható” segédprogramok használatára a Tailwindben.