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

selektor {
	text-overflow: ellipsis | clip;
}

Waardes

Waarde	Beskrywing
`ellipsis`	Voeg 'n ellips by aan die einde van afgekapte teks.
`clip`	Voeg nie 'n ellips by aan die einde nie (dit is die verstekwaarde, nodig vir die herroeping van die eienskap indien nodig).

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:

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

#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:

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

#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:

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

#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:

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

#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:

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

#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:

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

#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:

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

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

Sien ook

die eienskappe word-break en overflow-wrap,
wat dit moontlik maak om die letters van 'n lang woord na 'n nuwe reël oor te voer
die eienskap hyphens,
wat die skei van woorde in lettergrepe aanskakel
die eienskap overflow,
wat dele wat oor die blok se grens uitsteek, afkap