Cum să fixați textul la un anumit număr de linii în Tailwind

Acest articol va oferi procedura de fixare a textului într-un Tailwind.

Cum să fixați textul la un anumit număr de linii?

Clasa de blocare a liniilor din Tailwind limitează conținutul textului dintr-un bloc la un anumit număr de linii. Făcând acest lucru, blocul de text va ascunde textul după numărul de linii specificat în clasă. Poate fi folosit pe o pagină web pentru a arăta utilizatorului că există anumite informații text sau pentru a ascunde tot textul care nu este necesar pentru a evita saturarea paginii web.

Sintaxă

Sintaxa de mai jos este furnizată în „ clasă ” atributul unui element pentru aplicarea liniei de prindere:

În sintaxa definită mai sus, utilizatorul poate folosi numerele din „ 1 la 6 ” pentru utilizarea claselor implicite de prindere a liniilor. De exemplu, „ linie-clemă-1 ” clasa nu va lăsa conținutul textului să depășească un rând.

Să înțelegem conceptul de clasă „line-camp” prin câteva exemple.

Exemplul 1: Utilizați clasa Line Clamp pentru a limita conținutul la un anumit număr de linii

Să limităm conținutul textului la trei rânduri folosind clasa de fixare a liniilor din Tailwind, așa cum se face mai jos:

Explicația codului de mai sus este următoarea:

• A ' div ” elementul este creat cu colțuri rotunjite folosind „ rotunjite-lg ” clasa. Oferă marja și umplutura folosind „ m-{număr} ” & “ p-{număr} ' clase.
• Apoi, elementul din elementul div este centrat folosind „ justify-centre clasa ” și clasa ” contracta ” clasa creează un container care va conține elementul copil al div.
• „ bg-{culoare}-{număr} ” class setează culoarea de fundal a elementului div.
• A '

  ” se creează eticheta care conține conținutul textului. Este furnizată lățimea fixă ​​folosind „ w-{număr} ” clasa.

• În cele din urmă, conținutul text al „ p ” elementul este limitat la trei linii folosind „ linie-clemă-3 ” clasa.

Ieșire

Se poate vedea în rezultat că conținutul textului care a depășit limita specificată de trei linii este ascuns:

Exemplul 2: Utilizați clasa Line Clamp cu stări implicite în Tailwind

Tailwind oferă diverse stări implicite pentru un element care poate fi folosit pentru a face layout-urile de design mai dinamice. Dezvoltatorul poate folosi orice clasă Tailwind cu aceste stări pentru a oferi elementului proprietatea de proiectare specificată ori de câte ori acea stare este atinsă. În mod similar, clasa „line-clamp” poate fi utilizată și cu aceste stări implicite Tailwind.

Sintaxa pentru utilizarea clasei „line-clamp” cu o stare în Tailwind este dată mai jos:

Există trei stări implicite care sunt descrise după cum urmează:

• planare: Este starea unui element atunci când utilizatorul trece cursorul mouse-ului peste el.
• focus: Este starea în care elementul este focalizat. De exemplu, utilizatorul navighează la element apăsând tasta „tab”.
• activ: Starea în care elementul este activat de către utilizator.

În demonstrația de mai jos, totul este identic cu exemplul anterior. Singura diferență este că clasa de prindere a liniei este prevăzută cu „ planare ' stat:

Rețineți că „

” clasa este oferită de “ hover:line-clamp-3 ”, care va limita conținutul textului la trei rânduri ori de câte ori utilizatorul plasează cursorul mouse-ului peste caseta de conținut.

Ieșire

Se poate vedea în rezultatul de mai jos că proprietatea de fixare a liniei este aplicată atunci când cursorul mouse-ului trece peste bloc:

Exemplul 3: Utilizați clasa Line Clamp cu puncte de întrerupere

Punctele de întrerupere sunt interogări media în Tailwind care ajută utilizatorii să creeze un aspect de design receptiv. Tailwind oferă cinci puncte de întrerupere implicite cu lățimi minime predefinite. Dezvoltatorul poate folosi, de asemenea, clasa de prindere a liniilor cu aceste puncte de întrerupere.

Sintaxa pentru utilizarea unei clase de fixare a liniilor cu puncte de întrerupere este următoarea:

„Prefixele punctului de întrerupere” menționate în sintaxa de mai sus sunt după cum urmează:

• sm: Acest punct de întrerupere are o lățime minimă de 640 px.
• md: Acest punct de întrerupere are o lățime minimă de 768 px.
• lg: Acest punct de întrerupere are o lățime minimă de 1024 px.
• xl: Acest punct de întrerupere are o lățime minimă de 1280 px.
• 2xl: Acest punct de întrerupere are o lățime minimă de 1536 px.

În demonstrația de mai jos, „ p ” elementul este prevăzut cu diferite clase de cleme de linie pe diferite puncte de întrerupere. Aceasta va schimba proprietatea de fixare a liniilor a blocului de text ori de câte ori este atins noul punct de întrerupere:

Elementul p este prevăzut cu o clasă „line-clamp-1” în mod implicit. Cu toate acestea, conținutul textului din elementul „p” va fi limitat la un singur rând pentru „ sm ” punct de întrerupere, două linii pentru „ md ” punct de întrerupere și trei linii pentru „ lg ” Punct de întrerupere.

Ieșire

Din rezultat, este clar că proprietatea line-clamp a blocului de text se modifică pe măsură ce dimensiunea ecranului se modifică:

Am demonstrat procedura de fixare a textului la un anumit număr de linii în Tailwind.

Concluzie

Clasa de fixare a liniilor din Tailwind limitează conținutul textului unui element la numărul specificat de linii. Clasa „lin-clamp-{number}” este folosită ca sintaxă pentru fixarea textului la linii limitate. Clasa de cleme de linie poate fi utilizată cu punctele de întrerupere predefinite și variantele de stare în Tailwind. Acest articol a furnizat procedura de fixare a textului la un număr specificat de linii.