Den line-clampeiendoms trunkerte tekst på et bestemt antall linjer.
Spesifikasjonen for den er for tiden et redaktørutkast, så det betyr at ingenting her er satt i stein fordi det er et pågående arbeid. Når det er sagt, er det definert som en stenografi for, max-linesog block-overflowden tidligere er bemerket som i fare for å bli droppet i kandidatanbefalingen.
Det er lett å se hvordan max-linesdet blir nixet siden funksjonen (å angi antall linjer før avkorting) allerede er bakt inn, line-clampog eventuell videre abstraksjon kan være unødvendig. Men det er å få oss av banen, så la oss gå videre.
Syntaks
.module ( line-clamp: (none | ); )line-clamp godtar følgende verdier i gjeldende utkast til spesifikasjonen:
none: angir ikke maksimalt antall linjer, og ingen avkorting vil skje som et resultat.: angir maksimalt antall linjer før avkorting av innholdet, og viser deretter en ellipse (...) på slutten av den siste linjen.
Den ellipsen skal gjengis som et Unicode-tegn (U + 2026), men kan erstattes av en ekvivalent basert på innholdsspråket og skrivemodusen til brukeragenten som brukes.
Hei, kan jeg ikke gjøre dette med tekstoverløp?
Greit spørsmål, min venn, og svaret er, vel ...
(Se hva jeg gjorde der?)
... sorta.
text-overflowhar faktisk en ellipsisverdi som vil avkorte tekst:
.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )Se pennens tekstoverløp av Geoff Graham (@geoffgraham) på CodePen.
Hyggelig hyggelig, det er en god start. Men hva om vi ikke vil introdusere ellipsen ikke på første linje, men et sted, for eksempel den tredje tekstlinjen?
Det er der line-clampspiller inn. Bare vær oppmerksom på at en kombinasjon av tre egenskaper brukes til å få det til å skje:
.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )Se Pen linjeklemme (-webkit) av Geoff Graham (@geoffgraham) på CodePen.
Firefox støtter dette nå, akkurat slik (med -webkit-prefikset og alt).
Så, hva er fangsten?
Fra nå av er det nettleserstøtte. Linjeklemmer er en del av CSS Overflow Module Level 3, som for øyeblikket er i Editor's Draft og ikke støttes for øyeblikket.
Vi kan få litt linjespenning med et -webkit-prefiks (som, merkelig nok, fungerer på tvers av alle større nettlesere). Faktisk, det var slik demoen ovenfor ble gjort.
Vi kan gå ned JavaScript-banen hvis vi vil. Clamp.js vil gjøre susen:
Se Pen line-clamp (clamp.js) av Geoff Graham (@geoffgraham) på CodePen.
Nettleserstøtte
Dette er støtten for WebKits anstendighet og udokumenterte implementering av linjeklemme.
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Nei | 17 | 5 * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |