Lijnklem - CSS-trucs | CSS Almanac 2025

De line-clampeigenschap kapt tekst af op een bepaald aantal regels.

De specificatie ervoor is momenteel een Editor's Draft, dus dat betekent dat niets hier in steen gebeiteld staat omdat het een work in progress is. Dat gezegd hebbende, het wordt gedefinieerd als een afkorting voor max-linesen block-overflow, waarvan de eerste wordt opgemerkt als een risico om te worden geschrapt in de aanbeveling van de kandidaat.

Het is gemakkelijk in te zien hoe het max-lineszou worden verwijderd, aangezien de functie ervan (het aantal regels instellen vóór het afkappen) al is ingebakken line-clampen verdere abstractie misschien niet nodig is. Maar dat brengt ons van het goede spoor, dus laten we verder gaan.

Syntaxis

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

line-clamp accepteert de volgende waarden in de huidige versie van de specificatie:

none: stelt geen maximum in voor het aantal regels en als resultaat zal er geen afkapping plaatsvinden.
: stelt het maximale aantal regels in voordat de inhoud wordt afgekapt en geeft vervolgens een weglatingsteken (…) weer aan het einde van de laatste regel.

Dat weglatingsteken moet worden weergegeven als een Unicode-teken (U + 2026), maar kan worden vervangen door een equivalent op basis van de inhoudstaal en schrijfmodus van de User-Agent die wordt gebruikt.

Hé, kan ik dit niet doen met tekstoverloop?

Eerlijke vraag, mijn vriend, en het antwoord is, nou ...

(Zie wat ik daar heb gedaan?)

… Sorta.

text-overflowheeft inderdaad een ellipsiswaarde die tekst zal afkappen:

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

Zie de Pen text-overflow door Geoff Graham (@geoffgraham) op CodePen.

Lekker leuk, dat is een goed begin. Maar wat als we de ellips niet op de eerste regel willen introduceren, maar ergens, laten we zeggen, de derde regel tekst?

Dat is waar line-clampin het spel komt. Houd er rekening mee dat er een combinatie van drie eigenschappen wordt gebruikt om dit mogelijk te maken:

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

Zie de Pen lijnklem (-webkit) door Geoff Graham (@geoffgraham) op CodePen.

Firefox ondersteunt dit nu, precies op deze manier (met de -webkit-voorvoegsels en alles).

Dus, wat is de vangst?

Vanaf nu is het browserondersteuning. Lijnklemmen maken deel uit van de CSS Overflow Module Level 3 die momenteel in Editor's Draft staat en momenteel totaal niet wordt ondersteund.

We kunnen een regelklemactie krijgen met een -webkit-voorvoegsel (dat, vreemd genoeg, in alle grote browsers werkt). In feite is dat hoe de bovenstaande demo werd gedaan.

We kunnen het JavaScript-pad volgen als we dat willen. Clamp.js zal het lukken:

Zie de Pen lijnklem (clamp.js) door Geoff Graham (@geoffgraham) op CodePen.

Browser-ondersteuning

Dit is de ondersteuning voor WebKit's correctheid en ongedocumenteerde implementatie van lijnklem.

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.