Egenskaben text-overflow

Egenskaben text-overflow tilføjer en ellipse i slutningen af afkortet tekst for at indikere, at teksten ikke kunne være plads i blokken og blev afkortet.

For at egenskaben skal fungere, skal teksten være afkortet via egenskaben overflow eller egenskaben overflow-x med værdien hidden, auto eller scroll. Hvis den er sat til visible (hvilket er standardværdien) - vil text-overflow ikke fungere.

Syntaks

cssselektor {
  text-overflow: ellipsis | clip;
}

Værdier

Standardværdi: clip.

Eksempel . Overskridende tekst

I dette eksempel vil et meget langt ord ikke passe i containeren og vil overskride dens grænser. Der sker ingen afkortning:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: visible;
  border: 1px solid red;
}

Результат:

Eksempel . Lad os tilføje overflow-egenskaben

Nu vil alt, der overskrider containerens grænser, blive afkortet:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
}

Результат:

Eksempel . Værdien ellipsis

Nu tilføjer vi udover egenskaben overflow også text-overflow med værdien ellipsis. Den afkortede tekst får en ellipse tilføjet i slutningen:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Eksempel . Med rullebjælker

Hvis du sætter overflow: auto og text-overflow: ellipsis, vil der vises en rullebjælke, men ellipsen vil stadig blive tilføjet. Prøv at scrolle rullebjælken i eksemplet:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Eksempel . Hvis der ikke er nogen meget lange ord

Hvis der ikke er nogen ord, der er så lange, at de overskrider containerens grænse, vil der ikke ske nogen afkortning (intet overskrider jo). Se følgende eksempel:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Eksempel . Tekst på én linje

Der er dog situationer, hvor vi ønsker, at teksten skal afkortes, hvis den er for lang (teksten som helhed, ikke enkelte ord), og ikke bliver flyttet til næste linje. Dette gøres ved at tilføje egenskaben white-space med værdien nowrap, som forbyder ombrud af tekst til næste linje. Se på eksemplet, nu bliver teksten afkortet:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Eksempel . Bredde i procent

Hvis du sætter blokkens bredde i %, vil afkortningen også fungere korrekt:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Se også