Linjakiristin - CSS-temppuja | CSS-almanakka 2025

line-clampOmaisuus typistetyn tekstin tietty määrä rivejä.

Sen tekniset tiedot ovat tällä hetkellä toimittajan luonnos, joten tämä ei tarkoita, että mikään tässä ei ole kivissä, koska se on keskeneräinen työ. Se on sanottu, että se on määritelty lyhenteeksi max-linesja block-overflowjoista ensimmäinen on vaarassa pudota ehdokas suosituksessa.

On helppo nähdä, miten max-linesse sekoitettaisiin, koska sen toiminto (rivien lukumäärän asettaminen ennen katkaisua) on jo paistettu line-clampja kaikki muut abstraktit voivat olla tarpeettomia. Mutta se vie meidät raiteilta, joten siirrymme eteenpäin.

Syntaksi

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

line-clamp hyväksyy seuraavat arvot teknisessä luonnoksessa:

none: ei aseta enimmäismäärää rivien lukumäärälle eikä sen seurauksena tapahdu katkaisua.
: asettaa rivien enimmäismäärän ennen sisällön katkaisemista ja näyttää sitten ellipsin (…) viimeisen rivin lopussa.

Tämän ellipsin tulisi tehdä Unicode-merkki (U + 2026), mutta se voidaan korvata vastaavalla käytetyn User-Agentin sisältökielen ja kirjoitustilan perusteella.

Hei, enkö voi tehdä tätä tekstin ylivuodolla?

Hyvä kysymys, ystäväni, ja vastaus on, no…

(Katso mitä tein siellä?)

… Sorta.

text-overflowon todellakin ellipsisarvo, joka katkaisee tekstin:

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

Katso Geoff Grahamin (@geoffgraham) kynän tekstin ylivuoto CodePenistä.

Mukava mukava, se on hyvä alku. Mutta entä jos haluamme esitellä ellipsin ei ensimmäisellä rivillä, vaan jossain, sanotaan, kolmannella tekstirivillä?

Siellä line-clamptulee peliin. Huomaa vain, että kolmen ominaisuuden yhdistelmää käytetään sen toteuttamiseen:

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

Katso Geoff Grahamin (@geoffgraham) Pen line-clamp (-webkit) CodePenistä.

Firefox tukee tätä nyt, juuri tällä tavalla ( -webkit-etuliitteillä ja kaikilla).

Joten mikä on saalis?

Tällä hetkellä se on selaintuki. Linjapihdit ovat osa CSS-ylivuotomoduulin tasoa 3, joka on tällä hetkellä editorin luonnoksessa ja jota ei tueta tällä hetkellä.

Voimme saada jonkin verran linjan kiinnitystoimintaa -webkit-etuliitteellä (joka kummallakin tavalla toimii kaikissa suurimmissa selaimissa). Itse asiassa yllä oleva demo tehtiin.

Voisimme mennä JavaScriptiä pitkin, jos haluaisimme. Clamp.js tekee tempun:

Katso Geoff Grahamin (@geoffgraham) kynän kiinnitin (clamp.js) CodePenistä.

Selaimen tuki

Tämä tukee WebKitin tarkoituksenmukaisuutta ja dokumentoimatonta linjapuristimen toteutusta.

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.