Šis raksts ilustrēs:
Kā lietot “overflow-auto” programmā Tailwind?
' pārplūdes-auto ” klase automātiski pievieno ritjoslas, kad saturs pārplūst. Ja saturs nepārplūst, ritjosla netiek rādīta. Lai programmā Tailwind izmantotu “overflow-auto”, izveidojiet HTML programmu un pievienojiet “ pārplūdes-auto ” lietderības klase uz vēlamo elementu HTML programmā.
Sintakse
< elements klasē = 'pārplūdes automātiskais ...' > ... elements >
Piemērs
Šajā piemērā mēs izmantosim “pārpildes automātiskais” lietderība uz
konteiners: < ķermeni >
< div klasē = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS nodrošina dažādas 'pārpildes' utilītas, piemēram, 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' utt. Šīs utilītas nosaka, kā konkrēts elements apstrādā saturu, kas pārsniedz konteineru. Izmērs. Katra utilīta piedāvā unikālu funkcionalitāti, taču to galamērķis paliek nemainīgs, t.i., kontrolēt atlasītā elementa pārpildes uzvedību.
< / div >
< / ķermeni >
- “pārpildes automātiskais” klase tiek izmantota, lai pievienotu ritjoslas konteineru un rādīt tos tikai tad, kad ir nepieciešams ritināt.
- “bg-purple-300” klase iestata purpursarkano krāsu konteinera fona krāsai.
- “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š redzamajā izvadē tiek rādīta vertikāla ritjosla, kad teksts ir pārpildīts. Tas norāda, ka “pārpildes automātiskais” utilīta ir veiksmīgi piemērota elementam.
Kā lietot pārpildes ritināšanu programmā Tailwind?
Šī utilīta pievieno ritjoslas konteineram un vienmēr parāda tās pat tad, ja ritināšana nav nepieciešama. Tas arī ļauj ritināt visos virzienos. Lai programmā Tailwind izmantotu “pārplūdes ritināšanu”, izveidojiet HTML programmu un pievienojiet “pārpildīta ritināšana” lietderības klase konkrētajam elementam HTML programmā.
Sintakse
< elements klasē = 'pārpildīt-scroll...' > ... elements > Piemērs
Šajā piemērā mēs izmantosim “pārpildīta ritināšana” lietderība uz
< div klasē = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS nodrošina dažādas 'pārpildes' utilītas, piemēram, 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' utt. Šīs utilītas nosaka, kā konkrēts elements apstrādā saturu, kas pārsniedz konteineru. Izmērs. Katra utilīta piedāvā unikālu funkcionalitāti, taču to galamērķis paliek nemainīgs, t.i., kontrolēt atlasītā elementa pārpildes uzvedību.
< / div >
< / ķermeni >
Lūk, “pārpildīta ritināšana” klase tiek izmantota, lai pievienotu ritjoslas
konteineru un vienmēr tos parāda.Izvade
Iepriekš minētajā izvadē var redzēt gan vertikālās, gan horizontālās ritjoslas. Tas norāda, ka “pārpildīta ritināšana” utilīta ir veiksmīgi piemērota elementam.
Secinājums
Lai lietotu “overflow-auto” un “overflow-scroll” programmā Tailwind, ir jāpievieno “pārpildes automātiskais” un “pārpildīta ritināšana” lietderības klases vēlamajiem elementiem HTML programmā. Abas lietderības klases norādītajiem elementiem pievieno ritjoslas. Tomēr klase “overflow-scroll” rāda ritjoslas tikai tad, kad ritināšana ir nepieciešama, savukārt klase “overflow-scroll” vienmēr parāda tās pat tad, ja ritināšana nav nepieciešama. Šajā pārrakstā ir ilustrētas metodes, kā izmantot “overflow-auto” un “overflow-scroll” programmā Tailwind.