Clemă de linie - CSS-Tricks | Almanah CSS 2025

line-clampTextul trunchiate de proprietate la un anumit număr de linii.

Specificația pentru acesta este în prezent o schiță a editorului, deci asta înseamnă că nimic aici nu este pus în piatră, deoarece este o lucrare în desfășurare. Acestea fiind spuse, este definit ca o prescurtare pentru max-linesși block-overflow, dintre care prima este menționată ca fiind expusă riscului de a fi abandonată în Recomandarea candidatului.

Este ușor de văzut cum max-linesar fi fixat, deoarece funcția sa (setarea numărului de linii înainte de tăiere) este deja coaptă line-clampși orice altă abstractizare ar putea fi inutilă. Dar asta ne scoate din cale, așa că hai să mergem mai departe.

Sintaxă

.module ( line-clamp: (none | ); )

line-clamp acceptă următoarele valori în proiectul curent al specificației:

none: nu setează maxim pe numărul de linii și nu va avea loc nici o trunchiere.
: setează numărul maxim de linii înainte de trunchierea conținutului și apoi afișează o elipsă (...) la sfârșitul ultimei linii.

Elipsa respectivă ar trebui redată ca un caracter Unicode (U + 2026), dar ar putea fi înlocuită cu un echivalent bazat pe limbajul conținutului și modul de scriere al utilizatorului-agent utilizat.

Hei, nu pot face asta cu text-overflow?

Întrebare corectă, prietene, și răspunsul este, ei bine ...

(Vezi ce am făcut acolo?)

... sorta.

text-overfloware într-adevăr o ellipsisvaloare care va tăia textul:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Consultați textul-overflow al Pen de Geoff Graham (@geoffgraham) pe CodePen.

Frumos frumos, este un început bun. Dar dacă vrem să introducem elipsa nu pe prima linie, ci undeva, să zicem, a treia linie de text?

Acolo line-clampintră în joc. Rețineți că o combinație de trei proprietăți sunt folosite pentru a face acest lucru:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

Vedeți clema de linie Pen (-webkit) de Geoff Graham (@geoffgraham) pe CodePen.

Firefox acceptă acest lucru acum, exact așa (cu -webkit-prefixele și toate).

Deci, care este captura?

În prezent, este compatibil cu browserul. Clemele de linie fac parte din modulul CSS Overflow Module Nivelul 3, care este în prezent în Proiectul editorului și este complet neacceptat în acest moment.

Putem obține o acțiune de strângere a liniei cu un -webkit-prefix (care, destul de ciudat, funcționează în toate browserele majore). De fapt, așa s-a făcut demo-ul de mai sus.

Am putea merge pe calea JavaScript, dacă am dori. Clamp.js va face trucul:

Vedeți clema de linie Pen (clamp.js) de Geoff Graham (@geoffgraham) pe CodePen.

Suport pentru browser

Acesta este suportul pentru corectitudinea WebKit și implementarea nedocumentată a clemei de linie.

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.