Denne artikel vil give proceduren til at klemme teksten i en medvind.
Hvordan klemmes tekst til et bestemt antal linjer?
Line-clamping class i Tailwind begrænser tekstindholdet i en blok til et bestemt antal linjer. Ved at gøre dette vil tekstblokken skjule teksten efter det antal linjer, der er angivet i klassen. Det kan bruges på en webside til at vise brugeren, at der er noget tekstinformation eller til at skjule al den unødvendige tekst for at undgå mætning på websiden.
Syntaks
Den nedenfor angivne syntaks er angivet i ' klasse ” attribut for et element til at anvende linjespænding:
I den ovenfor definerede syntaks kan brugeren bruge tallene fra ' 1 til 6 ” for at bruge standard linjeklemningsklasser. For eksempel ' line-clamp-1 ” klasse vil ikke lade tekstindholdet overstige én linje.
Lad os forstå begrebet 'line-camp' klasse gennem nogle eksempler.
Eksempel 1: Brug Line Clamp Class til at begrænse indholdet til et bestemt antal linjer
Lad os begrænse tekstindholdet til tre linjer ved hjælp af line-clamping-klassen i Tailwind som gjort nedenfor:
< div klasse = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >
< s klasse = 'line-clamp-3 w-72' > Dette er et eksempel på et afsnit. Det vil kun være synligt i 3 linjer. Alt indholdet efter det bliver skjult. Dette skyldes lineopspændingsklassen i Tailwind. < / s >
< / div >
Forklaringen af ovenstående kode er som følger:
- en ' div ' element oprettes med afrundede hjørner ved hjælp af ' afrundet-lg ' klasse. Det giver margenen og polstringen ved hjælp af ' m-{number} ' & ' p-{nummer} ” klasser.
- Derefter centreres elementet i div-elementet ved hjælp af ' retfærdiggøre-center '-klassen, og ' bøje ” klasse opretter en container, der vil indeholde det underordnede element i div.
- Det ' bg-{color}-{number} ” klasse indstiller baggrundsfarven for div-elementet.
- en ' ” tag oprettes indeholdende tekstindholdet. Den leveres med fast bredde ved hjælp af ' w-{number} ' klasse.
- Endelig tekstindholdet i ' s ' element er begrænset til tre linjer ved hjælp af ' line-clamp-3 ' klasse.
Produktion
Det kan ses i outputtet, at tekstindholdet, der overskred den angivne grænse på tre linjer, er skjult:
Eksempel 2: Brug linjeklemmeklassen med standardtilstande i medvind
Tailwind giver forskellige standardtilstande for et element, der kan bruges til at gøre designlayouterne mere dynamiske. Udvikleren kan bruge en hvilken som helst Tailwind-klasse med disse tilstande til at levere den specificerede designegenskab til elementet, når denne tilstand opnås. På samme måde kan 'line-clamp'-klassen også bruges med disse standard Tailwind-tilstande.
Syntaksen for at bruge klassen 'line-clamp' med en tilstand i Tailwind er angivet nedenfor:
{ stat } : line-klemme- { nummer }Der er tre standardtilstande, der er beskrevet som følger:
- svæv: Det er tilstanden for et element, når brugeren holder musemarkøren over det.
- fokus: Det er tilstanden, når elementet er i fokus. For eksempel navigerer brugeren til elementet ved at trykke på 'tab'-tasten.
- aktiv: Tilstanden, når elementet aktiveres af brugeren.
I nedenstående demonstration er alt identisk med det foregående eksempel. Den eneste forskel er, at line-clamping-klassen er forsynet med ' svæve ' stat:
< div klasse = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< s klasse = ' hover:line-clamp-3 w-72' > Dette er et eksempel på et afsnit. Det vil kun være synligt i 3 linjer. Alt indholdet efter det bliver skjult. Dette skyldes lin-spændeklassen i Tailwind. < / s >
< / div >
Bemærk, at ' ' klasse leveres af ' hover:line-clamp-3 ” klasse, som vil begrænse tekstindholdet til tre linjer, når brugeren holder musemarkøren over indholdsboksen.
Produktion
Det kan ses i nedenstående output, at line clamping-egenskaben anvendes, når musemarkøren svæver over blokken:
Eksempel 3: Brug linjeklemmeklassen med brudpunkter
Breakpoints er medieforespørgsler i Tailwind, der hjælper brugere med at skabe et responsivt designlayout. Tailwind giver fem standardbrudpunkter med foruddefinerede minimumsbredder. Udvikleren kan også bruge linjespændingsklassen med disse brudpunkter.
Syntaksen for at bruge en linjespændingsklasse med brudpunkter er som følger:
{ brudpunktpræfikser } : line-klemme- { nummer }'Brækpunktspræfikserne' nævnt i ovenstående syntaks er som følger:
- sm: Dette brudpunkt har en minimumsbredde på 640px.
- md: Dette brudpunkt har en minimumsbredde på 768px.
- lg: Dette brudpunkt har en minimumsbredde på 1024px.
- xl: Dette brudpunkt har en minimumsbredde på 1280px.
- 2xl: Dette brudpunkt har en minimumsbredde på 1536px.
I nedenstående demonstration, ' s ” element er forsynet med forskellige line-clamp klasser på forskellige brudpunkter. Dette vil ændre egenskaben for linjeklemning af tekstblokken, når det nye brudpunkt nås:
< div klasse = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< s klasse = ' line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Dette er et eksempel på et afsnit. Det vil kun være synligt i 3 linjer. Alt indholdet efter det bliver skjult. Dette skyldes lin-spændeklassen i Tailwind. < / s >
< / div >
P-elementet er som standard forsynet med en 'line-clamp-1'-klasse. Tekstindholdet i 'p'-elementet vil dog være begrænset til én linje for ' sm ' brudpunkt, to linjer for ' md ' brudpunkt og tre linjer for ' lg ” brudpunkt.
Produktion
Fra outputtet er det klart, at line-clamp-egenskaben for tekstblokken ændres, når skærmstørrelsen ændres:
Vi har demonstreret proceduren til at klemme tekst til et bestemt antal linjer i Tailwind.
Konklusion
Linjeklemmeklassen i Tailwind begrænser tekstindholdet i et element til det angivne antal linjer. Klassen 'lin-clamp-{number}' bruges som en syntaks til at klemme teksten til begrænsede linjer. Linjeklemmeklassen kan bruges med de foruddefinerede brudpunkter og tilstandsvarianterne i Tailwind. Denne artikel har angivet proceduren for fastspænding af teksten til et bestemt antal linjer.