Generiranje CSS line-clamp

Generiraj CSS pravilo koje skraćuje tekst nakon određenog broja redaka s elipsisom ili zamagljivanjem.

Način skraćivanjaRedaka za prikazVisina redaZamagljuj prekinuti redak umjesto elipseUključi povratnu kompatibilnost za starije preglednikeUključi ekvivalent za TailwindTekst za pregled

Rezultat

Generiranje CSS line-clamp

Naslovi kartica, opisi proizvoda i pregledi komentara često trebaju isti trik: prikazati nekoliko redaka teksta i čisto odrezati ostatak umjesto da dugi odlomak razbije izgled stranice. Ovaj alat generiše CSS pravilo za tebe, spremno za kopiranje u stilsku datoteku kao klasa ".line-clamp".

Odaberi način za jedan redak za skraćivanje u jedan redak — klasična kombinacija "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" koja se koristi za naslove i ćelije tablica — ili način za više redaka, koji koristi "-webkit-line-clamp" da odsječe nakon koliko god redaka postaviš, poštujući visinu reda koju odabereš. Uključi opciju zamagljivanja da omekšaš posljednji redak u pozadinu gradacijom umjesto tvrdim elipsisom, što bolje izgleda preko slike ili obojene kartice. Opcija povratne kompatibilnosti dodaje blok "@supports" tako da preglednici bez podrške za line-clamp još uvijek dobiju razumno ograničenje max-height umjesto neskraćenog zida teksta, a opcija Tailwind dodaje odgovarajući utility razred ("truncate" ili "line-clamp-N") kao komentar tako da ga ne moraš tražiti.

Upiši ili zalijepi rečenicu u polje za pregled i alat procjenjuje kako bi se tvoj tekst prelomio preko odabranog broja redaka, tako da možeš provjeriti broj redaka prije nego što se odlučiš za dizajn. Procjena se temelji na prosječnoj dužini retka čitanja umjesto mjerenja stvarnih fontova i kontejnera — to je vodilja za odabir razumnog broja redaka, ne piksel-tačan render.

Sve se izvršava lokalno u tvom pregledniku: CSS se generiše dok kukaš, ništa se ne učitava nigdje, i možeš kopirati rezultat, preuzeti ga kao .txt datoteku, ili ga poslati direktno u unos drugog alata da nastaviš s radom.

FAQ

Koja je razlika između skraćivanja u jedan redak i u više redaka?

Jedan redak koristi text-overflow: ellipsis s white-space: nowrap i radi u svakom pregledniku. Više redaka koristi -webkit-line-clamp da odsječe nakon odabranog broja redaka, što zahtijeva display: -webkit-box postavljanje koje ovaj alat generiše za tebe.

Zašto opcija zamagljivanja uklanja -webkit-line-clamp?

Gradacija zamagljivanja trebuje fiksnu max-height i pozicijsku pseudo-elementa, ne box model za line-clamp, pa alat prelazi na max-height-bazirano pravilo kad god je zamagljivanje uključeno — za oba moda, jedan i više redaka.

Trebam li povratnu kompatibilnost za moderne preglednike?

Svi trenutni glavni preglednici podržavaju -webkit-line-clamp, pa povratna kompatibilnost uglavnom štiti stanije ili neuobičajene preglednike. Bezopasno je ostaviti uključeno: primjenjuje se samo unutar "@supports not" bloka koji moderni preglednici ignoriraju.

Koliko je točan pregled?

To je procjena na osnovi prosječne dužine reda, ne mjerenja tvojih stvarnih fontova ili širine kontejnera. Koristi je da provjeriš je li tvoj odabrani broj redaka razuman, pa onda provjeri stvarni rezultat na svojoj stranici.

Je li moj tekst za pregled učitan negdje?

Ne. CSS i pregled se generiše u potpunosti u tvom pregledniku — ništa što upiše se ne šalje na server.

Generiranje CSS line-clamp

Slični alati

Generiranje CSS line-clamp

FAQ