Egenskapen text-overflow

Egenskapen text-overflow legger til en ellipse på slutten av avkortet tekst for å indikere at teksten ikke fikk plass i blokken og ble avkortet.

For at egenskapen skal fungere, må teksten være avkortet via egenskapen overflow eller egenskapen overflow-x med verdien hidden, auto eller scroll. Hvis den er satt til visible (som er default) - vil ikke text-overflow fungere.

Syntaks

cssvelger {
  text-overflow: ellipsis | clip;
}

Verdier

Standardverdi: clip.

Eksempel . Tekst som flyter utenfor

I dette eksemplet vil et veldig langt ord ikke få plass i beholderen og vil flyte utenfor grensene. Det skjer ingen avkorting:

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 . La oss legge til egenskapen overflow

Nå vil alt som flyter utenfor beholderens grenser, blir avkortet:

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 . Verdien ellipsis

Nå vil vi, i tillegg til egenskapen overflow, også legge til text-overflow med verdien ellipsis. Den avkortede teksten vil få en ellipse på slutten:

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 rullefelt

Hvis du setter overflow: auto og text-overflow: ellipsis, vil det dukke opp et rullefelt, men ellipsen vil fortsatt bli lagt til. Prøv å rulle rullefeltet 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 det ikke er veldig lange ord

Hvis det ikke er så lange ord at de flyter utenfor beholderens grense, vil det ikke skje noen avkorting (ingenting flyter ut). Se på 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

Imidlertid er det situasjoner der vi ønsker at teksten skal avkortes hvis den er for lang (teksten generelt, ikke enkelte ord) og ikke brytes over på neste linje. Dette gjøres ved å legge til egenskapen white-space med verdien nowrap, som forbyr linjebryting av teksten. Se på eksemplet, nå blir teksten avkortet:

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 prosent

Hvis du setter bredden på blokken i %, vil avkorting 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å