Sări la conținut
TextArray1.87.0
Complet local

Generator CSS line-clamp

Generați o regulă CSS care trunchiază textul după un număr definit de linii, cu puncte de suspensie sau atenuare.

Ieșire
Instrumente conexe
Generator CSS clamp()Instrumente pentru dezvoltatori
Trunchiază textulManipularea textului
Generator text-shadow CSSnouInstrumente pentru dezvoltatori
Diferența tastei i18nInstrumente pentru dezvoltatori
Convertor TOML în JSONInstrumente pentru dezvoltatori
SQL în JSONInstrumente pentru dezvoltatori
Generator CSS line-clamp
Titlurile cardurilor, descrierile produselor și previzualizările comentariilor au nevoie în cele din urmă de același truc: afișează câteva linii de text și taie restul curat în loc să lași un paragraf lung să strice aspectul. Acest generator vă scrie acea regulă CSS, gată de lipit într-o foaie de stiluri ca o clasă ".line-clamp".
Alegeți modul cu o linie pentru trunchierea cu o singură linie — combinația clasică "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" folosită pentru titluri și celule de tabel — sau modul multi-linie, care folosește "-webkit-line-clamp" pentru a trunchia după oricâte linii setați, respectând înălțimea liniei pe care o alegeți. Activați opțiunea de atenuare pentru a suaviza linia finală în fundal cu un gradient în loc de puncte de suspensie brute, ceea ce se citește mai bine peste o imagine sau un card colorat. Opțiunea fallback adaugă un bloc "@supports" pentru ca navegatoarele fără suport line-clamp să primească în continuare o trunchiază sensibilă de max-height în loc de un zid de text nelimitat, iar opțiunea Tailwind adaugă clasa de utilitate corespunzătoare ("truncate" sau "line-clamp-N") ca comentariu pentru a nu trebui să o căutați.
Tastaț sau lipiți o propoziție în câmpul de previzualizare și instrumentul estimează cum textul dvs. s-ar întinde pe numărul ales de linii, pentru ca să verificați numărul de linii înainte de a vă angaja într-o proiectare. Estimarea se bazează pe o lungime medie de linie de citire în loc să măsoare fonturi și containere reale — este un ghid pentru a alege un număr sensibil de linii, nu o redare precisă la pixel.
Tot se execută local în navegatorul dvs.: CSS-ul este generat pe măsură ce tastați, nimic nu este încărcat nicăieri, iar vă puteți copia rezultatul, îl descărca ca fișier .txt, sau îl trimiteți direct la intrarea unui alt instrument pentru a continua lucrul.
FAQ
Care este diferența dintre trunchierea cu o linie și cu linii multiple?
Cea cu o linie folosește text-overflow: ellipsis cu white-space: nowrap și funcționează în fiecare navigator. Cea multi-linie folosește -webkit-line-clamp pentru a trunchia după oricâte linii setați, ceea ce necesită configurația display: -webkit-box pe care acest instrument o generează pentru dvs.
De ce opțiunea de atenuare elimină -webkit-line-clamp?
O atenuare cu gradient necesită o max-height fixă și un pseudo-element poziționat, nu modelul de casetă line-clamp, deci instrumentul comută la o regulă bazată pe max-height ori de câte ori atenuarea este pornită — pentru ambele moduri de o linie și multi-linie.
Am nevoie în continuare de fallback pentru navigatoare moderne?
Toate navigatoarele principale curente suportă -webkit-line-clamp, deci fallback protejează în principal navegatoarele mai vechi sau neobișnuite. Este inofensiv să îl lăsați activat: se aplică doar în interiorul unui bloc "@supports not" pe care navigatoarele moderne îl ignoră.
Cât de precisă este previzualizarea?
Este o estimare bazată pe o lungime medie de linie, nu o măsurare a fontului real sau a lățimii containerului dvs. Folosiți-o pentru a judeca dacă numărul ales de linii se simte corect, apoi verificați rezultatul real din pagina dvs.
Textul meu de previzualizare este încărcat undeva?
Nu. CSS-ul și previzualizarea sunt generate în întregime în navigatorul dvs. — nimic din ceea ce tastați nu este trimis unui server.