Wat betekent tekst inkorten ?
Het inkorten van tekst in CSS betekent het toevoegen van de puntjes op het einde van een zin om aan te geven dat er nog meer tekst is om te lezen. Helaas is er geen standaard CSS eigenschap die ervoor zorgt dat je tekst te pas en te onpas kunt inkorten. Dus hoe doe je dat dan ?
Er bestaan enkele CSS eigenschappen die wanneer je ze samen gebruikt ervoor zorgen dat je tekst ingekort wordt.
CSS eigenschappen
De volgende CSS eigenschappen kunnen helpen om je tekst in te korten op je website.
Eigenschap 1: White-Space: nowrap. Deze eigenschap forceert woorden in een rechte lijn zonder een volgende zin te gebruiken.
Eigenschap 2: Overflow: hidden. Deze eigenschap zorgt ervoor dat alles wat buiten het element valt niet zichtbaar is.
Eigenschap 3: Text-overflow: ellipses. Dit zet de (…) aan het einde van je woorden.
Als je deze 3 eigenschappen combineert kun je ervoor zorgen dat 1 zin wordt ingekort. Deze methode is de klassieke manier van het inkorten van tekst met CSS.
Als je maar een zin hebt die ingekort moet worden werkt het bovenstaande prima. Maar wat als je meerdere zinnen tegelijk wilt inkorten? Dit kun je bereiken met het gebruik van JavaScript.
Meerdere zinnen tegelijk inkorten met JavaScript
Deze techniek maakt gebruik van een vaste hoogte. Dus het eerste wat je moet doen is het bepalen van een hoogte voor je container of element. Daarna tel je het aantal zinnen dat je wilt negeren voordat je de tekst inkort en dat vermenigvuldig je vervolgens met de line-height om een max-height te krijgen.
Hier zie je een voorbeeld hoe dit in zijn werk gaat:
Stap 1: Max-height: calc (line-height * aantal zinnen die we willen laten zien);
Stap 2: We zetten de overflow:hidden en we bepalen de max-height, net als line-height naar de gewenste hoogte.
Stap 3: Daarna hebben we de eigenschap -webkit-box-orient die zetten we op vertical, -webkit-line-clamp en tekst-overflow zetten we op ellipsis en de display:box.
Voorbeeld
.paragraph {
Overflow:hidden;
max-height: 6rem;
line-height: 2.5rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
text-overflow: ellipsis;
display: block;
}
We kunnen dit ook met JavaScript doen.
Stap 1: Eerst maken we een functie genaamd truncate en geven we de words mee om in te korten eveneens als een max-length parameter.
Const truncate (words, maxlength)=>{}
Stap 2: Nu gaan we de slice methode toepassen om onze tekst in te korten. En laten onze ingekorte tekst terugkeren vanuit de truncate functie.
De slice methode begint op (0) omdat we de tekst willen inkorten van het begin van je zin tot het de specifieke plek waar het inkorten moet beginnen.
Const truncate (words, maxlength)=>{
return `${words.slice(0, maxlength)} …`
}
Stap 3: Voor de volgende en laatste stap, passeren we de words en maxlength als argumenten.
Const words = "You are learning text truncation with javascript which is done with these three steps"
Const truncate (words, maxlength)=>{
return `${words.slice(0, maxlength)} …`
}
truncate(words, 20)
Wil je na het inkorten van de tekst nog een element toevoegen? Dit kan met een pseudo-element :after.
Conclusie
In dit blog heb je gelezen hoe je één zin of 2 zinnen kunt inkorten met CSS en meerdere zinnen met behulp van JavaScript. Met JavaScript kun je na de inkorting nog een element toevoegen. Benieuwd hoe we dit kunnen toepassen op jouw website of een sparren? Neem contact op met Lorenzo.