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
white-space: nowrap
overflow: hidden
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;
}
Normaal
Met white-space: nowrap
Met white-space: nowrap
en overflow: hidden
Met white-space: nowrap
, overflow: hidden
en text-overflow: ellipsis
Chrome | Safari | Firfox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
25+ | 5.1+ | 19+ | 12.1+ | IE8+ | 2.1+ | 3.2+ |