Šis straipsnis parodys:
Kaip „Tailwind“ naudoti „perpildymas-paslėptas“?
The 'perteklius paslėptas' klasė paslepia arba apkarpo turinį, kuris viršija to elemento dydį. Norėdami panaudoti „perpildymo paslėptą“ funkciją „Tailwind“, sukurkite HTML programą ir su konkrečiu elementu pritaikykite „overflow-hidden“ paslaugų klasę.
Sintaksė
Pavyzdys
Šiame pavyzdyje taikysime 'perteklius paslėptas' įrankis, skirtas
< kūnas >
< div klasė = 'perpildymas-paslėptas bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS teikia įvairių 'perpildymas' komunalinės paslaugos, pvz „automatinis perpildymas“ , 'perpildymas-slinktis' , 'perteklius paslėptas' ,
'perpildymas - matomas' ir tt Šios priemonės nustato, kaip konkretus elementas tvarko turinys kuris viršija
konteineris dydis . Kiekviena programa siūlo unikalias funkcijas, tačiau jų galutinis tikslas išlieka tas pats, ty valdyti
perpildymo elgesys pasirinkta elementas.
< / div >
< / kūnas >
Čia:
- 'perteklius paslėptas' klasė naudojama paslėpti turinį, kuris viršija konteinerio dydį.
- „bg-purple-300“ klasė nustato purpurinę konteinerio fono spalvą.
- „p-4“ klasėje yra 4 vienetai kamšalo iš visų konteinerio pusių.
- 'mx-16' klasė taiko 16 paraštės vienetų konteinerio x ašyje.
- „mt-5“ klasė taiko 5 maržos vienetus konteinerio viršuje.
- 'h-32' klasė nustato konteinerio aukštį iki 32 vnt.
- „Teksto pagrindimas“ klasė pateisina turinio tekstą konteinerio viduje.
Išvestis
Aukščiau pateiktoje išvestyje nematyti perpildymo turinio, o tai rodo, kad „perpildymo paslėpta“ ypatybė buvo sėkmingai pritaikyta.
Kaip „Tailwind“ naudoti „perpildymas matomas“?
The „perpildymas – matomas“ klasė leidžia matyti pernelyg didelį turinį. Norėdami panaudoti „perpildymo matomą“ funkciją „Tailwind“, sukurkite HTML struktūrą ir konkrečiam elementui pritaikykite „perpildymo matomą“ paslaugų klasę.
Sintaksė
Pavyzdys
Šiame pavyzdyje taikysime „perpildymas – matomas“ įrankis į konteinerį, kad būtų rodomas perpildymo turinys: < kūnas >
< div klasė = 'perpildymas-matomas bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS teikia įvairių 'perpildymas' komunalinės paslaugos, pvz „automatinis perpildymas“ , 'perpildymas-slinktis' , 'perteklius paslėptas' ,
'perpildymas - matomas' ir tt Šios priemonės nustato, kaip konkretus elementas tvarko turinys kuris viršija
konteineris dydis . Kiekviena programa siūlo unikalias funkcijas, tačiau jų galutinis tikslas išlieka tas pats, ty valdyti
perpildymo elgesys pasirinkta elementas.
< / div >
< / kūnas >Čia, aukščiau esančiame kodo fragmente, „perpildymas – matomas“ klasė naudojama rodyti turinį, kuris viršija konteinerio dydį.
Išvestis
Remiantis aukščiau pateikta produkcija, „perpildymo matomas“ įrankis buvo sėkmingai pritaikytas.
Išvada
Norėdami „Tailwind“ naudoti „perpildymo paslėptas“ ir „perpildymas matomas“, pridėkite 'perteklius paslėptas' ir „perpildymas – matomas“ naudingumo klasės su norimais elementais HTML programoje. „Perpildymo paslėptas“ įrankis paslepia perpildytą turinį, o „perpildymo matomas“ rodo perpildytą nurodyto elemento turinį. Šiame straipsnyje parodytas „Tailwind“ „perpildymo paslėptas“ ir „perpildymo matomas“ paslaugų naudojimo pavyzdys.