CSS line-clamp generator
Genereer een CSS-regel die tekst na een bepaald aantal regels afkapt, met puntjes of vervaging.
CSS line-clamp generator
Kaarten titels, productbeschrijvingen en commentaarvoorbeelden hebben allemaal uiteindelijk dezelfde truuk nodig: toon een paar regels tekst en knip de rest netjes af, in plaats van een lange alinea het layout te laten verwoesten. Deze generator schrijft de CSS-regel voor u, klaar om in een stylesheet in te plakken als een ".line-clamp"-klasse.
Kies eenregelmodus voor eenvoudig afkappen — de klassieke combinatie "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" die voor titels en tabelcellen wordt gebruikt — of meerderege lsmodus, die "-webkit-line-clamp" gebruikt om na elk aantal regels af te kappen en daarbij de lijnhoogte respecteert die u kiest. Zet de vervagingsoptie aan om de laatste regel in plaats van vaste puntjes geleidelijk in de achtergrond uit te faden — dat ziet er beter uit over een afbeelding of gekleurde kaart. Met de terugvaloptie voegt u een "@supports"-blok toe zodat browsers zonder line-clamp-ondersteuning nog steeds een verstandige max-height-afkaapping krijgen in plaats van onbegrensde tekst. Met de Tailwind-optie voegt u de bijbehorende utility-klasse ("truncate" of "line-clamp-N") toe als opmerking, zodat u deze niet hoeft op te zoeken.
Typ of plak een zin in het voorbeeldveld en het tool laat zien hoe uw tekst over het gekozen aantal regels zou breken. Zo kunt u de regelaantal controleren voordat u zich aan een ontwerp vastlegt. De schatting is gebaseerd op een gemiddelde leeslijnlengte, geen meting van werkelijke lettertypes en containerbreedtes — het is een handleiding voor het kiezen van een verstandig regelaantal, geen pixelnauwkeurige weergave.
Alles wordt lokaal in uw browser gegenereerd: de CSS wordt gegenereerd terwijl u typt, niets wordt ergens geüpload, en u kunt het resultaat kopiëren, als .txt-bestand downloaden of rechtstreeks naar de invoer van een ander hulpmiddel sturen om mee door te gaan.