CSS Teksteffect

CSS Tekst Overloop, Heel Woord Wissel, Regelebreak Regels en Schrijf Mode

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 overloop van niet-getoonde inhoud 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 ellips (…):

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.

Hier is de CSS-code:

Voorbeeld

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

Probeer het zelf uit

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

Voorbeeld

div.test:hover {
  overflow: visible;
{}

Probeer het zelf uit

CSS woordafbreking (Word Wrapping)

CSS word-wrap Eigenschap maakt het mogelijk voor lange teksten om doorgebroken te worden en over te gaan op de volgende regel.

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

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Met de word-wrap-eigenschap kunt u de tekst dwingen over te gaan op een nieuwe regel - zelfs als dit betekent dat het woord in het midden wordt doorbroken:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Hier is de CSS-code:

Voorbeeld

Laat lange woorden breken en overgaan naar de volgende regel:

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

Probeer het zelf uit

CSS regelsbreukregels

CSS word-break Eigenschap specificeert de regelsbreukregels.

Deze alinea bevat enkele teksten. Deze regel zal op het hyphen worden doorbroken:

This paragraph contains some text. This line will-break-at-hyphens.

Deze alinea bevat enkele teksten. De regels zullen op elke letter worden doorbroken:

This paragraph contains some text. The lines will break at any character.

Hier is 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.

Some text with a span element with a 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 teksteffecteigenschappen

De tabel hieronder lijst de CSS teksteffecteigenschappen:

Eigenschap Beschrijving
text-align-last Bepaal hoe de laatste regel van de tekst wordt uitgelijnd.
text-justify Bepaal hoe uitgelijnde teksten worden uitgelijnd en gescheiden.
text-overflow Bepaal hoe overlopende inhoud wordt weergegeven.
word-break Bepaal de regels voor het doorbreken van niet-CJK tekens.
word-wrap Laat lange woorden afbreken en doorverwijzen naar de volgende regel.
writing-mode Bepaal of de tekstregels horizontaal of verticaal worden geplaatst.