Denne artikkelen vil gi fremgangsmåten for å klemme teksten i en medvind.
Hvordan klemme tekst til et bestemt antall linjer?
Line-clamping class i Tailwind begrenser tekstinnholdet i en blokk til et bestemt antall linjer. Ved å gjøre dette vil tekstblokken skjule teksten etter antall linjer spesifisert i klassen. Den kan brukes på en nettside for å vise brukeren at det er noe tekstinformasjon eller for å skjule all unødvendig tekst for å unngå metning på nettsiden.
Syntaks
Syntaksen nedenfor er gitt i ' klasse ” attributt for et element for å bruke linjeklemming:
I den ovenfor definerte syntaksen kan brukeren bruke tallene fra ' 1 til 6 ' for bruk av standard linjeklemmingsklasser. For eksempel ' line-clamp-1 ” klasse vil ikke la tekstinnholdet overstige én linje.
La oss forstå konseptet med 'line-camp' klasse gjennom noen eksempler.
Eksempel 1: Bruk linjeklemmeklassen for å begrense innholdet til et spesifikt antall linjer
La oss begrense tekstinnholdet til tre linjer ved å bruke linjeklemmingsklassen 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å avsnitt. Det vil bare være synlig i 3 linjer. Alt innholdet etter det vil bli skjult. Dette på grunn av lineklemmeklassen i Tailwind. < / s >
< / div >
Forklaringen av koden ovenfor er som følger:
- en ' div '-elementet lages med avrundede hjørner ved å bruke ' avrundet-lg ' klasse. Den gir margin og utfylling ved å bruke ' m-{number} ' & ' p-{nummer} ' klasser.
- Deretter blir elementet i div-elementet sentrert ved å bruke ' rettferdiggjøre-senter '-klassen, og ' bøye seg Klasse oppretter en beholder som vil inneholde det underordnede elementet til div.
- « bg-{color}-{number} klasse setter bakgrunnsfargen til div-elementet.
- en ' ”-taggen opprettes som inneholder tekstinnholdet. Den er gitt fast bredde ved å bruke ' w-{number} ' klasse.
- Til slutt, tekstinnholdet i ' s '-elementet er begrenset til tre linjer ved å bruke ' line-clamp-3 ' klasse.
Produksjon
Det kan sees i utdataene at tekstinnholdet som overskred den angitte grensen på tre linjer er skjult:
Eksempel 2: Bruk linjeklemmeklassen med standardtilstander i medvind
Tailwind gir forskjellige standardtilstander for et element som kan brukes til å gjøre designoppsettene mer dynamiske. Utvikleren kan bruke hvilken som helst Tailwind-klasse med disse tilstandene for å gi den spesifiserte designegenskapen til elementet når den tilstanden oppnås. På samme måte kan 'line-clamp'-klassen også brukes med disse standard Tailwind-tilstandene.
Syntaksen for å bruke 'line-clamp'-klassen med en tilstand i Tailwind er gitt nedenfor:
{ stat } : line-klemme- { Antall }Det er tre standardtilstander som er beskrevet som følger:
- sveve: Det er tilstanden til et element når brukeren holder musepekeren over det.
- fokus: Det er tilstanden når elementet er i fokus. For eksempel navigerer brukeren til elementet ved å trykke på 'tab'-tasten.
- aktiv: Tilstanden når elementet aktiveres av brukeren.
I demonstrasjonen nedenfor er alt identisk med det forrige eksemplet. Den eneste forskjellen er at linjeklemmingsklassen er utstyrt med ' sveve ' 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å avsnitt. Det vil bare være synlig i 3 linjer. Alt innholdet etter det vil bli skjult. Dette skyldes lin-klemmeklassen i Tailwind. < / s >
< / div >
Merk at ' '-klassen leveres av ' hover:line-clamp-3 ”-klassen, som vil begrense tekstinnholdet til tre linjer hver gang brukeren holder musepekeren over innholdsboksen.
Produksjon
Det kan sees i utgangen nedenfor at linjeklemmingsegenskapen brukes når musepekeren svever over blokken:
Eksempel 3: Bruk linjeklemmeklassen med bruddpunkter
Breakpoints er mediespørringer i Tailwind som hjelper brukere med å lage et responsivt designoppsett. Tailwind gir fem standardbruddpunkter med forhåndsdefinerte minimumsbredder. Utvikleren kan også bruke linjeklemmingsklassen med disse bruddpunktene.
Syntaksen for å bruke en linjeklemmingsklasse med bruddpunkter er som følger:
{ bruddpunktprefikser } : line-klemme- { Antall }'Kneppepunktprefiksene' nevnt i syntaksen ovenfor er som følger:
- sm: Dette bruddpunktet har en minimumsbredde på 640 piksler.
- md: Dette bruddpunktet har en minimumsbredde på 768 piksler.
- lg: Dette bruddpunktet har en minimumsbredde på 1024px.
- xl: Dette bruddpunktet har en minimumsbredde på 1280px.
- 2xl: Dette bruddpunktet har en minimumsbredde på 1536px.
I demonstrasjonen nedenfor, ' s ”-elementet er utstyrt med forskjellige linjeklemmeklasser på forskjellige bruddpunkter. Dette vil endre linjeklemmingsegenskapen til tekstblokken når det nye bruddpunktet 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å avsnitt. Det vil bare være synlig i 3 linjer. Alt innholdet etter det vil bli skjult. Dette skyldes lin-klemmeklassen i Tailwind. < / s >
< / div >
p-elementet er utstyrt med en 'line-clamp-1'-klasse som standard. Imidlertid vil tekstinnholdet i 'p'-elementet være begrenset til én linje for ' sm ' bruddpunkt, to linjer for ' md ' bruddpunkt, og tre linjer for ' lg ' bruddpunkt.
Produksjon
Fra utgangen er det klart at linjeklemme-egenskapen til tekstblokken endres når skjermstørrelsen endres:
Vi har demonstrert prosedyren for å klemme tekst til et spesifikt antall linjer i Tailwind.
Konklusjon
Linjeklemmeklassen i Tailwind begrenser tekstinnholdet til et element til det angitte antallet linjer. Klassen 'lin-clamp-{number}' brukes som en syntaks for å klemme teksten til begrensede linjer. Linjeklemmeklassen kan brukes med de forhåndsdefinerte bruddpunktene og tilstandsvariantene i Tailwind. Denne artikkelen har gitt fremgangsmåten for å klemme teksten til et spesifisert antall linjer.