Joonklamber - CSS-trikid | CSS-i almanahh 2025

line-clampVara kärbitud teksti teatud arvu liinidel.

Selle spetsifikatsioon on praegu redaktori mustand, nii et see tähendab, et siin pole midagi kivisse raiutud, kuna see on pooleliolev töö. See tähendab, et see on määratletud kui lühikirjeldus max-linesja block-overflowmillest esimene on märgitud kandidaatide soovituses langemise ohuna.

On lihtne mõista, kuidas max-linessee seguneks, kuna selle funktsioon (ridade arvu määramine enne kärpimist) on juba sisse küpsenud line-clampja edasine abstraktsioon võib olla tarbetu. Kuid see viib meid rajalt kõrvale, nii et lähme edasi.

Süntaks

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

line-clamp aktsepteerib spetsifikaadi praeguses mustandis järgmisi väärtusi:

none: ei määra ridade arvule maksimumi ja selle tulemusel kärpimist ei toimu.
: määrab enne sisu kärpimist maksimaalse ridade arvu ja kuvab viimase rea lõpus ellipsi (…).

See ellips tuleb renderdada Unicode'i märgina (U + 2026), kuid selle võib asendada samaväärsega, mis põhineb kasutatava kasutajaagendi sisukeelel ja kirjutamisrežiimil.

Hei, kas ma ei saa seda teha teksti ületäitumisega?

Õiglane küsimus, mu sõber, ja vastus on, noh ...

(Vaadake, mida ma seal tegin?)

... sorta.

text-overflowon tõepoolest ellipsisteksti kärpiv väärtus:

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

Vaadake CodePenilt Geoff Graham'i (@geoffgraham) pliiatsi teksti ületäitumist.

Tore kena, see on hea algus. Aga mis siis, kui tahame ellipsi tutvustada mitte esimesel, vaid kusagil, ütleme, kolmandal tekstireal?

Seal line-clamptuleb mängu. Pange tähele, et selle elluviimiseks kasutatakse kolme omaduse kombinatsiooni:

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

Vaadake CodePenil Geoff Graham'i (@geoffgraham) pliiatsi liini klambrit (-webkit).

Firefox toetab seda praegu, täpselt nii (koos -webkit-eesliidete ja kõigiga).

Mis saak on?

Praegu on see brauseritugi. Liiniklambrid on osa CSS-i ülevoolumooduli 3. tasemest, mis on praegu redaktori mustandis ja mida praegu ei toetata.

Me võime saada mõned liini kinnitusklambrid -webkit-eesliitega (mis kummalisel kombel töötab kõigis suuremates brauserites). Tegelikult tehti ülaltoodud demo nii.

Soovi korral võiksime minna JavaScripti rada mööda. Clamp.js teeb trikki:

Vaadake CodePenilt Geoff Graham'i (@geoffgraham) pliiatsi liini klambrit (clamp.js).

Brauseri tugi

See on WebKiti sobivus ja dokumentideta liini klambri rakendamine.

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.