Tekst automatisch afknippen

Hier onder zie je vier keer een tekst, blauw op een lichtgroene achtergrond. De achtergrond is 300px breed.

Bij de bovenste regel loopt de tekst uit de lichtgroene box. Bij de andere drie regels wordt de tekst afgebroken. Bij de vierde regel is de afgeknipte tekst vervangen door drie puntjes. Dat wordt beletselteken of ellips genoemd (karakter: …).

Op deze bladzijde wordt uit de doeken gedaan hoe je dit doet.

• Het effect wordt helemaal geregeld met CSS. De groene blokken worden gecentreerd op het scherm getoond.
  Elk van de groene blokken is een <p>-tag, met een (verschillend) id. Elk id zorgt er voor de opmaak van de blokken:
   
  width:300px; color:navy; background-color:#ddffdd;
white-space:nowrap
   
  De breedte van het blok ligt vast op 300px. De eigenschap white-space:nowrap zorgt er voor dat alle tekst op één regel blijft staan. Dat is essentieel, anders werkt het niet.
• Bij de tweede, de derde en de vierde regel is de ingesteld: overflow:hidden. Daardoor wordt de tekst aan de rechterkant afgekapt.
• Bij de derde regel is ingesteld: text-overflow:clip. clip is de default-waarde van text-overflow. Als text-overflow niet is ingesteld, wordt dus clip gebuikt. Daardoor zien de regels 2 en 3 er exact hetzelfde uit.
• Bij de vierde regel is ingesteld: text-overflow:ellipsis. De afgekapte tekst wordt vervangen door drie puntjes, zodanig dat ze zichtbaar zijn op het scherm.
   
• De CSS-specificatie noemt ook de mogelijkheid om een string op te geven als waarde voor text-overflow. Je zou dus in plaats van de drie puntjes je eigen tekst op kunnen geven, bijvoorbeeld: 'Lees verder >>'. Dit werkt echter alleen in FireFox.
   
• Tenslotte:
  Wees er op bedacht dat text-overflow alleen werkt met: overflow:hidden en white-space:nowrap.

De CSS-code van het vierde blok luidt:

#div3 {
  width:300px;
  color:navy;
  background-color:#ddffdd;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipis;
}

Opmerking:
Een meer uitgebreide beschrijving vind je in het item Automatisch woorden en regels afbreken in HTML.