CSS teksteffekt

CSS Tekst Overflod, helvortext linjeskift, linjeskiftsregler og skrivemåde

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

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

CSS Tekst Overflod

CSS text-overflow Egenskaben bestemmer, hvordan de udsendte indholdsoverskydende 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å vises 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 overflødig indhold vises, når musen holdes over elementet:

Eksempel

div.test:hover {
  overflow: visible;
}

Prøv det selv

CSS ordbrydning (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 udenfor:

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 at linjebrække teksten - selv dette betyder at det brydes midt i et ord:

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 ruleregler

CSS word-break Egenskaben bestemmer rulereglerne for linjeskift.

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

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

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 skrivemøde

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

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

Følgende eksempel viser nogle forskellige skrivemønstre:

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 Bestemmer hvordan sidste linje af teksten skal justeres.
text-justify Bestemmer hvordan justeret tekst skal justeres og afstande.
text-overflow Bestemmer hvordan ikke-visuelle overflowindhold præsenteres for brugeren.
word-break Bestemmer linjeskiftsreglerne for ikke-CJK skriftsprog.
word-wrap Tillader lange ord at blive brudt og flyttet til næste række.
writing-mode Bestemmer om tekstlinjen skal placeres horisontalt eller vertikalt.