Die text-overflow Eienskap

Die eienskap text-overflow voeg 'n ellips (drie puntjies) by aan die einde van afgekapte teks as 'n aanduiding dat die teks nie in die blok gepas het nie en afgekap is.

Vir die eienskap om te werk, moet die teks afgekap wees deur die eienskap overflow of die eienskap overflow-x met die waarde hidden, auto of scroll. As visible gestel is (dit is die verstekwaarde) - sal text-overflow nie werk nie.

Sintaksis

cssselektor {
  text-overflow: ellipsis | clip;
}

Waardes

Verstekwaarde: clip.

Voorbeeld . Teks wat uitsteek

In hierdie voorbeeld sal 'n baie lang woord nie in die houer pas nie en sal oor sy grense uitsteek. Geen afkapping vind plaas nie:

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

Результат:

Voorbeeld . Laat ons die overflow eienskap byvoeg

Nou sal alles wat oor die houer se grense uitsteek, bloot afgekap word:

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

Результат:

Voorbeeld . Die ellipsis waarde

Nou sal ons, bykomend tot die eienskap overflow, ook text-overflow byvoeg met die waarde ellipsis. 'n Ellips sal by die afgekapte teks aan die einde gevoeg word:

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

Результат:

Voorbeeld . Met scroll bars

As jy overflow: auto en text-overflow: ellipsis stel, sal 'n scroll bar verskyn, maar die ellips sal steeds bygevoeg word. Probeer om die scroll bar in die voorbeeld te skuif:

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

Результат:

Voorbeeld . As daar nie baie lang woorde is nie

As daar nie woorde is wat lank genoeg is om oor die houer se grens uit te steek nie, sal afkapping nie plaasvind nie (niks steek immers uit nie). Kyk na die volgende voorbeeld:

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

Результат:

Voorbeeld . Teks in een reël

Daar is egter situasies waar ons wil hê dat teks afgekap moet word as dit te lank is (die teks as geheel, nie individuele woorde nie) en nie na die volgende reël moet oorvloei nie. Dit word gedoen deur die eienskap white-space by te voeg met die waarde nowrap, wat die oorvloei van teks na 'n ander reël verbied. Kyk na die voorbeeld, nou word die teks afgekap:

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

Результат:

Voorbeeld . Breedte in persentasie

As jy die breedte van die blok in % stel, sal die afkapping ook korrek werk:

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

Результат:

Sien ook