CSS Teksteffect

CSS Tekst Overloop, Volledige Woord Aanpassing, Aanpassingsregels en Schrijfwijze

In dit hoofdstuk zult u de volgende eigenschappen leren:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS Tekst Overloop

CSS text-overflow De eigenschap bepaalt hoe de overmatige inhoud die niet wordt weergegeven aan de gebruiker moet worden weergegeven.

Het kan worden afgesneden:

Dit is een lange tekst die niet in het kader kan worden opgenomen. Dit is een lange tekst die niet in het kader kan worden opgenomen.

Het kan ook worden weergegeven als een ellipsis (…):

Dit is een lange tekst die niet in het kader kan worden opgenomen. Dit is een lange tekst die niet in het kader kan worden opgenomen.

Hieronder volgt de CSS-code:

Voorbeeld

p.test1 {
  white-space: nowrap; 
  breedte: 200px; 
  border: 1px solide #000000;
  overflow: hidden;
  text-overflow: clip; 
}
p.test2 {
  white-space: nowrap; 
  breedte: 200px; 
  border: 1px solide #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

Probeer het zelf uit

Hieronder wordt een voorbeeld gegeven van hoe overloopende inhoud wordt weergegeven wanneer de muis over het element wordt gehouden:

Voorbeeld

div.test:hover {
  overflow: visible;
}

Probeer het zelf uit

CSS woordomloop (Word Wrapping)

CSS word-wrap Eigenschap maakt het mogelijk voor lange teksten om doorgesneden te worden en doorgetrokken naar de volgende regel.

Als een woord te lang is om in een gebied te passen, zal het eruit steken:

Dit paragraaf bevat een zeer lang woord: thisisaveryveryveryveryveryverylongword. Het lange woord zal doorgesneden en doorgetrokken naar de volgende regel worden.

Met de word-wrap-eigenschap kunt u de tekst dwingen om door te breken - zelfs als dit betekent dat het woord in het midden wordt doorgesneden:

Dit paragraaf bevat een zeer lang woord: thisisaveryveryveryveryveryverylongword. Het lange woord zal doorgesneden en doorgetrokken naar de volgende regel worden.

Hieronder volgt de CSS-code:

Voorbeeld

Laat lange woorden doorgesneden en doorgetrokken naar de volgende regel toe toestaan:

p {
  word-wrap: break-word;
}

Probeer het zelf uit

CSS regelbreukregels

CSS word-break Eigenschap specificeert de regelbreukregels.

Dit paragraaf bevat enkele tekst. Deze regel zal bij de koppeltekens worden doorgesneden:

Dit paragraaf bevat enkele tekst. Deze regel zal bij de koppeltekens worden doorgesneden:

Dit paragraaf bevat enkele tekst. Deze regels zullen bij elke karakter worden doorgesneden:

Dit paragraaf bevat enkele tekst. De regels zullen bij elke karakter worden doorgesneden.

Hieronder volgt de CSS-code:

Voorbeeld

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

Probeer het zelf uit

CSS schrijfmodus

CSS writing-mode Eigenschap bepaalt of de tekstregels horizontaal of verticaal worden geplaatst.

Enkele tekst met een span-element met een vertical-rl writing-mode.

Hieronder wordt een voorbeeld gegeven van verschillende schrijfmodi:

Voorbeeld

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

Probeer het zelf uit

CSS teksteffect-eigenschappen

De tabel hieronder lijst de CSS teksteffect-eigenschappen op:

Eigenschap Beschrijving
text-align-last Specificeer hoe de laatste regel van de tekst moet worden uitgelijnd.
text-justify Specificeer hoe de uitgelijnde tekst moet worden uitgelijnd en gescheiden.
text-overflow Specificeer hoe overlopende inhoud moet worden weergegeven.
word-break Specificeer de regels die moeten worden gebroken voor niet-CJK schriften.
word-wrap Laat lange woorden breken en overgaan naar de volgende regel.
writing-mode Specificeer of de tekstregels horizontaal of verticaal geplaatst moeten zijn.