Šis raksts parādīs:
Kā Tailwind lietotnē “pārplūdes slēptais”?
The “pārpildīts-slēpts” klase slēpj vai izgriež saturu, kas pārsniedz šī elementa lielumu. Lai izmantotu “overflow-hidden” programmā Tailwind, izveidojiet HTML programmu un izmantojiet “overflow-hidden” utilīta klasi ar konkrēto elementu.
Sintakse
Piemērs
Šajā piemērā mēs izmantosim “pārpildīts-slēpts” utilīta konteineram
< ķermeni >
< div klasē = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS nodrošina dažādus 'pārplūde' komunālie pakalpojumi, piemēram 'pārpildes automātiskais' , 'pārpildes-scroll' , 'pārpildīts-slēpts' ,
'pārplūdes redzams' utt. Šīs utilītas nosaka, kā konkrēts elements apstrādā saturu kas pārsniedz
konteiners Izmērs . Katra utilīta piedāvā unikālu funkcionalitāti, taču to galamērķis paliek nemainīgs, t.i., kontrolēt
pārpildes uzvedība atlasīts elements.
< / div >
< / ķermeni >
Šeit:
- “pārpildīts-slēpts” klase tiek izmantota, lai paslēptu saturu, kas pārsniedz konteinera izmēru.
- “bg-purple-300” klase konteinera fonam iestata purpursarkano krāsu.
- “p-4” klases komplekti 4 polsterējuma vienības uz konteinera visām pusēm.
- “mx-16” klase piemēro 16 rezervju vienības konteinera x asij.
- “mt-5” klase piemēro 5 rezerves vienības konteinera augšpusē.
- “h-32” klase nosaka konteinera augstumu uz 32 vienībām.
- “Teksta attaisnošana” klase attaisno konteinerā esošā satura tekstu.
Izvade
Iepriekš minētajā izvadē nevar redzēt pārpildītu saturu, kas norāda, ka rekvizīts “pārpildes-slēptais” ir veiksmīgi lietots.
Kā lietot “pārplūdes redzams” programmā Tailwind?
The 'pārplūdes redzams' klase ļauj redzēt pārmērīgu saturu. Lai izmantotu “overflow-visible” programmā Tailwind, izveidojiet HTML struktūru un konkrētajam elementam izmantojiet utilītas klasi “overflow-visible”.
Sintakse
Piemērs
Šajā piemērā mēs izmantosim 'pārplūdes redzams' utilīta konteineram, lai parādītu pārpildes saturu: < ķermeni >
< div klasē = 'pārplūdes-redzams bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS nodrošina dažādus 'pārplūde' komunālie pakalpojumi, piemēram 'pārpildes automātiskais' , 'pārpildes-scroll' , 'pārpildīts-slēpts' ,
'pārplūdes redzams' utt. Šīs utilītas nosaka, kā konkrēts elements apstrādā saturu kas pārsniedz
konteiners Izmērs . Katra utilīta piedāvā unikālu funkcionalitāti, taču to galamērķis paliek nemainīgs, t.i., kontrolēt
pārpildes uzvedība atlasīts elements.
< / div >
< / ķermeni >Šeit, iepriekš minētajā koda fragmentā, 'pārplūdes redzams' klase tiek izmantota, lai parādītu saturu, kas pārsniedz konteinera izmēru.
Izvade
Saskaņā ar iepriekš minēto rezultātu utilīta “pārplūdes redzamā” ir veiksmīgi izmantota.
Secinājums
Lai programmā Tailwind izmantotu “pārplūdes slēptās” un “pārplūdes redzamās” opcijas, pievienojiet “pārpildīts-slēpts” un 'pārplūdes redzams' lietderības klases ar vēlamajiem elementiem HTML programmā. Lietderība “pārpildes slēptā” paslēpj pārpildošo saturu, bet “pārpildes redzamā” parāda norādītā elementa pārpildošo saturu. Šajā rakstā ir parādīta metode, kā programmā Tailwind izmantot “pārplūdes slēptās” un “pārplūdes redzamās” utilītas.