Linijos spaustukas - CSS-gudrybės

line-clampNuosavybės nukerta tekstas tam tikru skaičiumi linijas.

Šiuo metu jo specifikacija yra redaktoriaus juodraštis, taigi tai reiškia, kad nieko čia nėra akmenyje, nes tai yra nebaigtas darbas. Be to, jis apibrėžiamas kaip „stenografija“ max-linesir block-overflow, kurių pirmasis yra pažymėtas kaip rizika būti atmestas rekomendacijose dėl kandidatų.

Lengva suprasti, kaip max-linesbūtų susimaišyta, nes jo funkcija (eilučių skaičiaus nustatymas prieš sutrumpinimą) jau yra įjungta line-clampir bet kokia kita abstrakcija gali būti nereikalinga. Bet tai mus išmuša iš vėžių, todėl eikime toliau.

Sintaksė

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

line-clamp priima šias vertes dabartiniame specifikacijos projekte:

• none: nenustato maksimalaus eilučių skaičiaus ir dėl to nenutrumpins.
• : nustato didžiausią eilučių skaičių prieš sutrumpinant turinį, tada paskutinės eilutės pabaigoje rodoma elipsė (…).

Ši elipsė turėtų būti pateikiama kaip „Unicode“ simbolis (U + 2026), tačiau ją galima pakeisti ekvivalentu, atsižvelgiant į naudojamo „User-Agent“ turinio kalbą ir rašymo režimą.

Ei, ar negaliu to padaryti su perpildytu tekstu?

Teisingas klausimas, mano drauge, ir atsakymas yra toks:

(Matai, ką aš ten padariau?)

… Sorta.

text-overflowiš tikrųjų turi ellipsisvertę, kuri sutrumpins tekstą:

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

Peržiūrėkite „Geoff Graham“ (@geoffgraham) „Pen“ teksto perpildymą „CodePen“.

Gražu gražu, tai gera pradžia. Bet ką daryti, jei mes norime įvesti elipsę ne pirmoje eilutėje, o kur nors, tarkime, trečioje teksto eilutėje?

Čia ir line-clampatsiranda žaidimas. Tiesiog atkreipkite dėmesį, kad tam pasiekti naudojami trijų savybių deriniai:

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

Peržiūrėkite Geoffo Grahamo (@geoffgraham) „Pen line-clamp“ (-webkit) „CodePen“.

„Firefox“ tai palaiko dabar, tiksliai tokiu būdu (su -webkit-priešdėliais ir visais).

Taigi, koks laimikis?

Šiuo metu tai yra naršyklės palaikymas. Linijos spaustukai yra 3 lygio CSS perpildymo modulio dalis, kuri šiuo metu yra redaktoriaus juodraštyje ir šiuo metu visiškai nepalaikoma.

Mes galime gauti tam tikrą linijos užspaudimo veiksmą su -webkit-priešdėliu (kuris, kaip bebūtų keista, veikia visose pagrindinėse naršyklėse). Tiesą sakant, taip buvo padaryta aukščiau pateikta demonstracija.

Jei norėtume, galėtume eiti „JavaScript“ keliu. „Clamp.js“ atliks triuką:

Peržiūrėkite Geoffo Grahamo (@geoffgraham) „Pen line-clamp“ (clamp.js) „CodePen“.

Naršyklės palaikymas

Tai yra „WebKit“ tinkamumo ir be dokumentų patvirtinto linijos spaustuko palaikymas.

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“	„Firefox“	T.Y	Briauna	„Safari“
14 *	68 *	Ne	17	5 *

Mobilusis / planšetinis kompiuteris

„Android Chrome“	„Android Firefox“	„Android“	„iOS Safari“
88 *	85 *	2,3 *	5,0–5,1 *