CSS Tekst effecten

In dit hoofdstuk leer je nieuwe teksteigenschappen die meer controle bieden over de tekstweergave.

CSS introduceerde verschillende eigenschappen voor het wijzigen van de tekstinhoud. Deze eigenschappen geven je nauwkeurige controle over het weergeven van de tekst in de webbrowser.

De volgende eigenschappen worden uitgelegd:

text-overflow

word-wrap

word-break

writing-mode

CSS text-overflow

De CSS eigenschap text-overflow geeft aan hoe de inhoud wordt weergegeven. Bijvoorbeeld wanneer de tekst in een vak moet worden afgebroken omdat het te lang is.

text-overflow: clip:

Het kan worden geknipt:

Dit is een lange tekst die niet in de box(vak) past

text-overflow: ellipsis:

of het kan worden weergegeven als een ellips (...):

Dit is een lange tekst die niet in de box(vak) past

Voorbeeld:

p.box1 {
  white-space: nowrap; 
  width: 205px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.box2 {
  white-space: nowrap; 
  width: 205px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

Uitproberen

Het volgende voorbeeld laat zien hoe je de overflowed inhoud kunt weergeven wanneer je over het element beweegt:

Voorbeeld:

p.box:hover {
  overflow: visible;
}

Uitproberen

CSS word wrapping

Met de eigenschap word-wrap kunnen lange woorden worden afgebroken en op een volgende regel weer doorgaan.

Als een woord te lang is om in een gebied te passen, breidt het zich uit naar buiten.

Deze paragraaf bevat een zeer lang woord: ditiseenzeerlangelangelangewoord. Het lange woord zal worden afgebroken en doorgaan op de volgende regel.

Met de word-wrap eigenschap kun je de tekst dwingen om af te breken en in het vak te passen.

Deze paragraaf bevat een zeer lang woord: ditiseenzeerlangelangelangewoord. Het lange woord zal worden afgebroken en doorgaan op de volgende regel.

Voorbeeld:

p.box {
  word-wrap: break-word;
}

Uitproberen

CSS word breaking

De eigenschap word-break wordt gebruikt voor het afbreken van regels. De volgende waarden worden geaccepteerd door de eigenschap word-break normal, break-all en keep-all.

Deze paragraaf bevat enige tekst. Deze regel wordt afgebroken-bij-koppel-tekens.

Deze paragraaf bevat enige tekst. De regels breken bij elk karakter of teken.

Voorbeeld:

p.box1 {
  word-break: keep-all;
}

p.box2 {
  word-break: break-all;
}

Uitproberen

CSS writing mode

De eigenschap writing-mode geeft aan of tekstregels horizontaal of verticaal worden opgemaakt.

Wat tekst met een span element met een vertical-rl schrijfmodus.

Voorbeeld:

p.box1 {
  writing-mode: horizontal-tb; 
}

p.box2 {
  writing-mode: vertical-rl; 
}

span.box2 {
  writing-mode: vertical-rl; 
}

Uitproberen

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.