Preskoči na vsebino
TextArray1.87.0
100% lokalno

Generator CSS line-clamp

Generiraj CSS pravilo, ki preskrajša besedilo po določenem številu vrstic z elipso ali razblinjovanjem.

Izhod
Povezana orodja
CSS clamp() generatorOrodja za razvijalce
Odreži besediloManipulacija besedila
CSS generator sence besedilanovoOrodja za razvijalce
i18n tipka difOrodja za razvijalce
Pretvornik TOML v JSONOrodja za razvijalce
SQL v JSONOrodja za razvijalce
Generator CSS line-clamp
Naslovi kartic, opisi proizvodov in predogledi komentarjev pogosto potrebujejo isti trik: prikazati nekaj vrstic besedila in čisto odrezati preostanek namesto da dolg odstavek pretrga postavitev strani. To orodje generiše CSS pravilo zate, pripravljeno za kopiranje v slogovno datoteko kot razred ".line-clamp".
Zaberi način za eno vrstico za skrajšanje v eno vrstico — klasična kombinacija "overflow: hidden; text-overflow: ellipsis; white-space: nowrap", ki se uporablja za naslove in celice preglednice — ali način za več vrstic, ki uporablja "-webkit-line-clamp" da preseže po toliko vrstic, kot nastavljaš, pri čemer spoštuje višino vrstice, ki jo izbereš. Vključi možnost razblinjovanja, da omehčaš zadnjo vrstico v ozadje z gradientom namesto trde elipse, ki izgleda bolje čez sliko ali barvno kartico. Možnost podpore za starejše brskalnike doda blok "@supports", tako da brskalnike brez podpore za line-clamp še vedno dobijo razumno omejevanje max-height namesto neskrajšane stene besedila, in možnost Tailwind doda ustrezen utility razred ("truncate" ali "line-clamp-N") kot komentar, da ga ni treba iskati.
Vpišite ali prilepite stavek v polje za predogled in orodje oceni, kako se bo vaše besedilo prelomilo čez izbrano število vrstic, da lahko preverite število vrstic, preden se odločite za oblikovanje. Ocena temelji na povprečni dolžini bralnega reda, ne na merjenju pravih pisav in vsebnikov — to je vodilo za izbiro razumnega števila vrstic, ne slikovnega točnega prikaza.
Vse se izvršava lokalno v vašem brskalniku: CSS se generiše, medtem ko tipkate, nič se ne naloži nikamor, in lahko kopirate rezultat, ga prenesete kot datoteko .txt ali ga pošljete neposredno v vnos drugega orodja, da nadaljujete z delom.
FAQ
Kakšna je razlika med skrajšanjem na eno vrstico in na več vrstic?
Ena vrstica uporablja text-overflow: ellipsis s white-space: nowrap in deluje v vsakem brskalniku. Več vrstic uporablja -webkit-line-clamp, da preseka po izbrani vrstici, kar zahteva display: -webkit-box nastavko, ki ga to orodje za vas ustvari.
Zakaj opcija razblinjovanja odstrani -webkit-line-clamp?
Gradient razblinjovanja potrebuje fiksno max-height in pozicionirani psevdo-element, ne box model za line-clamp, zato orodje preklopi na max-height-temelječno pravilo, kadar je razblinjovanje vključeno — za oba načina, eno in več vrstic.
Ali še vedno potrebujem podporo za starejše brskalnike?
Vsi trenutni glavni brskalnike podpirajo -webkit-line-clamp, zato podpora starejšim brskalnikom v glavnem ščiti starejše ali nenavadne brskalnike. Varno je pustiti vključeno: velja samo znotraj bloka "@supports not", ki ga moderni brskalnike ne opazijo.
Kako točen je predogled?
To je ocena na osnovi povprečne dolžine vrstice, ne meritve vaših dejanskih pisav ali širine posode. Uporabite ga za presojo, ali je vaša izbrana vrstica smiselna, nato preverite dejanski rezultat na vaši strani.
Ali je moje besedilo za predogled naloženo nekje?
Ne. CSS in predogled se generirata v celoti v vašem brskalniku — nič, kar vtipkate, se ne pošlje na strežnik.