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

selektor {
	text-overflow: ellipsis | clip;
}

Værdier

Værdi	Beskrivelse
`ellipsis`	Tilføjer en ellipse i slutningen af den afkortede tekst.
`clip`	Tilføjer ikke en ellipse i slutningen (dette er standardværdien, bruges til at annullere egenskabens virkning om nødvendigt).

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:

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

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

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

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

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

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:

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

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:

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

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

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

Eksempel . Bredde i procent

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

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

Se også

egenskaberne word-break og overflow-wrap,
som tillader at flytte bogstaver i et langt ord til en ny linje
egenskaben hyphens,
som aktiverer orddeling i stavelser
egenskaben overflow,
som afkorter dele, der overskrider blokkens grænse