CSS Teksteffekt

CSS Tekst Overløb, helvægt, linjeskiftsregler og skrivemåde

I dette kapitel vil du lære følgende egenskaber:

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

CSS Tekst Overløb

CSS text-overflow Egenskaben bestemmer, hvordan de ikke visede overflødige indhold skal præsenteres for brugeren.

Det kan beskæres:

Dette er nogle lange tekster, der ikke kan indeholde i en boks. Dette er nogle lange tekster, der ikke kan indeholde i en boks

Det kan også præsenteres som ellipser (…):

Dette er nogle lange tekster, der ikke kan indeholde i en boks. Dette er nogle lange tekster, der ikke kan indeholde i en boks

Følgende CSS-kode vises:

Eksempel

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; 
}

Prøv det selv

Følgende eksempel viser, hvordan overskydende indhold vises, når musen placeres over elementet:

Eksempel

div.test:hover {
  overflow: visible;
}

Prøv det selv

CSS tekstbrydning (Word Wrapping)

CSS word-wrap Egenskaben gør det muligt for lange tekster at brydes og flyttes til næste linje.

Hvis et ord er for langt til at passe i et område, vil det udvide sig udad:

Denne afsnit indeholder et meget langt ord: thisisaveryveryveryveryveryverylongword. Det lange ord vil brydes og flyttes til næste linje.

Gennem word-wrap egenskaben kan du tvunget på tekst til at brydes - selv om det betyder at bryde ordet midt i:

Denne afsnit indeholder et meget langt ord: thisisaveryveryveryveryveryverylongword. Det lange ord vil brydes og flyttes til næste linje.

Følgende CSS-kode vises:

Eksempel

Tillader lange ord at brydes og flyttes til næste linje:

p {
  word-wrap: break-word;
}

Prøv det selv

CSS linjeskiftsregler

CSS word-break Egenskaben bestemmer om der skal bruges en linjeskiftsregler.

Denne afsnit indeholder nogle tekst. Denne linje vil brydes ved bindestreger:

Denne afsnit indeholder nogle tekst. Denne linje vil brydes ved bindestreger.

Denne afsnit indeholder nogle tekst. Disse linjer vil brydes ved hvilken som helst tegn:

Denne afsnit indeholder nogle tekst. Linjerne vil brydes ved hvilken som helst tegn.

Følgende CSS-kode vises:

Eksempel

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

Prøv det selv

CSS skriveområder

CSS writing-mode Egenskaben bestemmer om tekstlinjer skal placeres horisontalt eller vertikalt.

Nogle tekst med et span-element med en vertical-rl writing-mode.

Følgende eksempel viser nogle forskellige skriveområder:

Eksempel

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

Prøv det selv

CSS teksteffekt egenskaber

Følgende tabel viser CSS teksteffekt egenskaber:

Egenskab Beskriver
text-align-last Angiver, hvordan den sidste linje i teksten skal justeres.
text-justify Angiver, hvordan justeret tekst skal justeres og intervallet.
text-overflow Angiver, hvordan ikke-visuelle overflødige indhold skal præsenteres for brugeren.
word-break Angiver reglerne for linjeskift for ikke-CJK skriftsprog.
word-wrap Tillader lange ord at blive brudt og flyttet til næste linje.
writing-mode Angiver om tekstlinjen skal placeres horisontalt eller vertikalt.