Šiame straipsnyje bus pateikta teksto suspaudimo tailwind procedūra.
Kaip prispausti tekstą prie konkretaus eilučių skaičiaus?
„Tailwind“ linijų užspaudimo klasė apriboja teksto turinį bloke iki tam tikro eilučių skaičiaus. Tai atlikus, teksto blokas paslėps tekstą po klasėje nurodyto eilučių skaičiaus. Jis gali būti naudojamas tinklalapyje norint parodyti vartotojui, kad yra tam tikros tekstinės informacijos, arba paslėpti visą nereikalingą tekstą, kad tinklalapis nebūtų perpildytas.
Sintaksė
Žemiau pateikta sintaksė pateikiama „ klasė ” elemento atributas, skirtas linijos suspaudimui:
Aukščiau apibrėžtoje sintaksėje vartotojas gali naudoti skaičius iš „ nuo 1 iki 6 “, jei norite naudoti numatytąsias linijos užspaudimo klases. Pavyzdžiui, „ linijos spaustukas-1 “ klasė neleis teksto turiniui viršyti vienos eilutės.
Supraskime „linijinės stovyklos“ klasės sąvoką per keletą pavyzdžių.
1 pavyzdys: naudokite linijos užspaudimo klasę, kad apribotumėte turinį iki konkretaus eilučių skaičiaus
Apribokime teksto turinį iki trijų eilučių, naudodami linijos suspaudimo klasę Tailwind, kaip tai daroma toliau:
< div klasė = ' suapvalintas-lg flex justify-center bg-slate-200 m-5 p-4' >
< p klasė = 'line-clamp-3 w-72' > Tai yra pastraipos pavyzdys. Jis bus matomas tik 3 eilutes. Visas turinys po jo bus paslėptas. Taip yra dėl linijos suspaudimo klasės Tailwind. < / p >
< / div >
Aukščiau pateikto kodo paaiškinimas yra toks:
- A “ div “ elementas sukuriamas suapvalintais kampais naudojant “ suapvalintas-lg ' klasė. Jame pateikiama paraštė ir užpildymas naudojant „ m-{number} “ ir „ p-{number} “ klases.
- Tada elementas div elemente centruojamas naudojant „ išteisinimo centras “ klasė ir „ lankstus “ klasė sukuria konteinerį, kuriame bus antrinis div elementas.
- „ bg-{color}-{number} “ klasė nustato div elemento fono spalvą.
- A “ “ yra sukurta žyma, kurioje yra teksto turinys. Jis suteikiamas fiksuotas plotis naudojant ' w-{number} ' klasė.
- Galiausiai teksto turinys p “ elementas yra apribotas iki trijų eilučių naudojant „ linijos spaustukas-3 ' klasė.
Išvestis
Išvestyje matyti, kad teksto turinys, kuris viršijo nurodytą trijų eilučių ribą, yra paslėptas:
2 pavyzdys: Tailwind naudokite linijos spaustuko klasę su numatytosiomis būsenomis
Tailwind pateikia įvairias numatytąsias elemento būsenas, kurias galima naudoti, kad dizaino išdėstymai būtų dinamiškesni. Kūrėjas gali naudoti bet kurią „Tailwind“ klasę su šiomis būsenomis, kad suteiktų elementui nurodytą dizaino ypatybę, kai tik ši būsena pasiekiama. Panašiai „line-clamp“ klasė taip pat gali būti naudojama su šiomis numatytosiomis Tailwind būsenomis.
Toliau pateikiama „line-clamp“ klasės naudojimo su būsena „Tailwind“ sintaksė:
{ valstybė } : linijos spaustukas- { numerį }Yra trys numatytosios būsenos, kurios aprašomos taip:
- užveskite pelės žymeklį: Tai elemento būsena, kai vartotojas užveda pelės žymeklį virš jo.
- dėmesys: Tai būsena, kai elementas yra sufokusuotas. Pavyzdžiui, vartotojas pereina prie elemento paspausdamas „tabuliavimo“ klavišą.
- aktyvus: Būsena, kai elementą suaktyvina vartotojas.
Žemiau esančioje demonstracijoje viskas yra identiška ankstesniame pavyzdyje. Vienintelis skirtumas yra tas, kad linijos užveržimo klasė pateikiama su ' užveskite pelės žymeklį “ būsena:
< div klasė = ' suapvalintas-lg flex justify-center bg-slate-200 m-5 p-4' >< p klasė = 'hover:line-clamp-3 w-72' > Tai yra pastraipos pavyzdys. Jis bus matomas tik 3 eilutes. Visas turinys po jo bus paslėptas. Taip yra dėl linijinio tvirtinimo klasės Tailwind. < / p >
< / div >
Atkreipkite dėmesį, kad „ “ klasę teikia “ užvedimas: linija-spaustukas-3 “ klasė, kuri apribos teksto turinį iki trijų eilučių, kai vartotojas užves pelės žymeklį virš turinio laukelio.
Išvestis
Toliau pateiktame išvestyje matyti, kad linijos suspaudimo savybė taikoma, kai pelės žymeklis užves virš bloko:
3 pavyzdys: naudokite linijos spaustuko klasę su lūžio taškais
Lūžio taškai yra „Tailwind“ medijos užklausos, padedančios vartotojams sukurti interaktyvų dizaino išdėstymą. Tailwind pateikia penkis numatytuosius pertraukos taškus su iš anksto nustatytais minimaliais pločiais. Kūrėjas taip pat gali naudoti linijos suspaudimo klasę su šiais lūžio taškais.
Linijos suspaudimo klasės su lūžio taškais naudojimo sintaksė yra tokia:
{ lūžio taško priešdėliai } : linijos spaustukas- { numerį }Aukščiau pateiktoje sintaksėje paminėti „lūžio taško priešdėliai“ yra tokie:
- sm: Mažiausias šio lūžio taško plotis yra 640 pikselių.
- md: Mažiausias šio lūžio taško plotis yra 768 pikseliai.
- lg: Mažiausias šio lūžio taško plotis yra 1024 pikseliai.
- xl: Mažiausias šio lūžio taško plotis yra 1280 pikselių.
- 2xl: Mažiausias šio lūžio taško plotis yra 1536 pikseliai.
Toliau pateiktoje demonstracijoje „ p “ elementas yra aprūpintas skirtingomis linijinių spaustukų klasėmis skirtinguose lūžio taškuose. Pasiekus naują lūžio tašką, bus pakeista teksto bloko eilutės fiksavimo savybė:
< div klasė = ' suapvalintas-lg flex justify-center bg-slate-200 m-5 p-4' >< p klasė = ' linija-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Tai yra pastraipos pavyzdys. Jis bus matomas tik 3 eilutes. Visas turinys po jo bus paslėptas. Taip yra dėl linijinio tvirtinimo klasės Tailwind. < / p >
< / div >
Pagal numatytuosius nustatymus p elementui suteikiama „line-clamp-1“ klasė. Tačiau teksto turinys „p“ elemente bus apribotas viena eilute „ sm lūžio taškas, dvi eilutės md lūžio taškas ir trys eilutės lg “ lūžio taškas.
Išvestis
Iš išvesties aišku, kad keičiantis ekrano dydžiui keičiasi teksto bloko linijos užspaudimo savybė:
Pademonstravome procedūrą, kaip suspausti tekstą į tam tikrą skaičių eilučių programoje Tailwind.
Išvada
Tailwind linijos fiksavimo klasė apriboja elemento teksto turinį iki nurodyto eilučių skaičiaus. Klasė „lin-clamp-{number}“ naudojama kaip sintaksė tekstui prispausti prie ribotų eilučių. Linijos apkabos klasė gali būti naudojama su iš anksto nustatytais lūžio taškais ir būsenos variantais Tailwind. Šiame straipsnyje pateikta procedūra, kaip suspausti tekstą iki nurodyto eilučių skaičiaus.