Linija-stezaljka - CSS-trikovi

line-clampTekst imovine skraćeni na određeni broj redaka.

Specifikacija za njega trenutno je urednikov nacrt, pa to znači da ovdje ništa nije postavljeno u kamen jer je to u tijeku. S tim u vezi, definirano je kao skraćenica za max-linesi block-overflow, od kojih je prva navedena kao opasnost od odbacivanja u Preporuci za kandidate.

Lako je vidjeti kako max-linesbi se uklopilo, jer je njegova funkcija (postavljanje broja redaka prije skraćivanja) već ispečena line-clampi svaka daljnja apstrakcija može biti nepotrebna. Ali to nas izbacuje iz kolosijeka, pa krenimo dalje.

Sintaksa

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

line-clamp prihvaća sljedeće vrijednosti u trenutnom nacrtu specifikacije:

none: ne postavlja maksimum broja linija i neće se dogoditi skraćivanje.
: postavlja maksimalan broj redaka prije skraćivanja sadržaja, a zatim na kraju zadnjeg retka prikazuje elipsu (...).

Ta elipsa trebala bi se prikazati kao Unicode znak (U + 2026), ali mogla bi biti zamijenjena ekvivalentom na temelju jezika sadržaja i načina pisanja User-Agenta koji se koristi.

Hej, zar to ne mogu učiniti s preljevom teksta?

Pošteno pitanje, prijatelju, a odgovor je, pa ...

(Vidite što sam tamo radio?)

... sorta.

text-overflowdoista ima ellipsisvrijednost koja će skratiti tekst:

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

Pogledajte preljev teksta olovke Geoff Graham (@geoffgraham) na CodePenu.

Lijepo lijepo, to je dobar početak. Ali što ako želimo predstaviti elipsu ne u prvom retku, već negdje, recimo, u trećem retku teksta?

Tu line-clampdolazi do izražaja. Samo imajte na umu da se za to koristi kombinacija tri svojstva:

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

Pogledajte stezaljku za liniju olovke (-webkit) Geoff Grahama (@geoffgraham) na CodePenu.

Firefox to sada podržava, upravo na ovaj način (s -webkit-prefiksima i svim ostalim).

Pa, u čemu je kvaka?

Trenutno je to podrška za preglednike. Stezaljke linija dio su CSS modula za preljev razine 3 koji je trenutno u Editorovoj skici i trenutno u potpunosti nije podržan.

Možemo izvršiti akciju stezanja linija s -webkit-prefiksom (koja, čudno, djeluje u svim glavnim preglednicima). Zapravo, tako je i napravljen gornji demo.

Mogli bismo ići JavaScript stazom ako želimo. Clamp.js će napraviti trik:

Pogledajte Pen-line stezaljku (clamp.js) Geffa Grahama (@geoffgraham) na CodePenu.

Podrška preglednika

Ovo je podrška WebKitovoj ispravnosti i nedokumentiranoj implementaciji stezaljke.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.