Website

Verschillende manieren om tekst in te korten met CSS

5 min leestijd

In dit artikel kijken we hoe we tekst kunnen inkorten met CSS met behulp van de programmeertaal voor het web JavaScript.

Verschillende manieren om tekst in te korten met CSS

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.

Ook interessant

Wireframe, een solide basis voor je website
2 min leestijd

Wireframe, een solide basis voor je website

Website: De website ontwikkeling bij Nederdesign gaat via een structureel traject. Bij de website ontwikkeling starten we met een wireframe. Maar wat is dit precies en hoe ‘lees’ je deze?

Lees meer
Visuele hiërarchie
2 min leestijd

Visuele hiërarchie

Website: Hiërarchie is belangrijk in een website. Binnen één oogopslag moet duidelijk zijn wat het meest belangrijk is op de website. Visueel doe je dit met (tekst)grootte, kleuren en meer.

Lees meer
Iconen, musthaves op je website
5 min leestijd

Iconen, musthaves op je website

Website: Iconen zijn onderdeel van je website. Of het nu gaat over een idee op papier, een digitaal prototype of een website die live staat.

Lees meer
Bekijk alle berichten