Tekst goed afbreken in CSS met text-overflow

Wanneer tekst in een blok moet worden afgebroken omdat het te lang is, dan kan dat op verschillende manieren. De tekst kan hard afgebroken worden, verborgen worden, of netjes afgebroken worden met een '...' op het eind.

Het resultaat bereiken we in 3 stappen

  1. Om ervoor te zorgen dat de tekst niet naar een volgende regel gaat (wrap) moeten we als eerste gebruik maken van

white-space: nowrap

 

  1. Nu willen we nog dat de tekst niet uit ons blok steekt, dus gebruiken we

overflow: hidden

 

  1. De text-overflow: ellipsis stijleigenschap in CSS zorgt ervoor dat de tekst word afgebroken voordat de overflow begint. Op de plaats van het laatste karakter wordt dan een ellipsis (Unicode Range Value U+2026) neergezet, wat er uitziet als "..." 

Een voorbeeld van een class met text-overflow:

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

 

Voorbeeld:

Normaal

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

 

Met white-space: nowrap

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

 

Met white-space: nowrap en overflow: hidden

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

 

Met white-space: nowrap, overflow: hidden en text-overflow: ellipsis

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

 

Browser Support

Chrome Safari Firfox Opera IE Android iOS
25+ 5.1+ 19+ 12.1+ IE8+ 2.1+ 3.2+