Egenskapen text-overflow

Egenskapen text-overflow lägger till en ellips i slutet av avklippt text för att indikera att texten inte fick plats i blocket och har klippts av.

För att egenskapen ska fungera måste texten klippas av via egenskapen overflow eller egenskapen overflow-x med värdet hidden, auto eller scroll. Om visible är angivet (vilket det är som standard) - kommer text-overflow inte att fungera.

Syntax

selektor {
	text-overflow: ellipsis | clip;
}

Värden

Värde	Beskrivning
`ellipsis`	Lägger till en ellips i slutet av avklippt text.
`clip`	Lägger inte till ellips i slutet (detta är standardvärdet, används för att återställa egenskapens beteende vid behov).

Standardvärde: clip.

Exempel . Text som sticker ut

I detta exempel kommer ett mycket långt ord inte att få plats i containern och kommer att sticka ut utanför dess gränser. Ingen avklippning sker:

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

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

Exempel . Vi lägger till egenskapen overflow

Nu kommer allt som sticker ut utanför containerns gränser att klippas av:

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

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

Exempel . Värdet ellipsis

Nu lägger vi till text-overflow med värdet ellipsis, utöver egenskapen overflow. En ellips kommer att läggas till i slutet av den avklippta texten:

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

Exempel . Med rullningslister

Om du anger overflow: auto och text-overflow: ellipsis, kommer en rullningslist att visas, men ellipsen kommer fortfarande att läggas till. Försök att rulla rullningslisten i exemplet:

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

Exempel . Om det inte finns några väldigt långa ord

Om det inte finns några tillräckligt långa ord som sticker ut utanför containerns gränser, kommer ingen avklippning att ske (ingenting sticker ju ut). Titta på följande exempel:

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

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

Exempel . Text på en rad

Det finns dock situationer där vi vill att texten ska klippas av om den är för lång (hela texten, inte enskilda ord) och inte brytas till nästa rad. Detta görs genom att lägga till egenskapen white-space med värdet nowrap, vilket förbjuder radbrytning. Titta på exemplet, nu klipps texten av:

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

Exempel . Bredd i procent

Om du anger blockets bredd i %, kommer avklippningen också att fungera 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 även

egenskaperna word-break och overflow-wrap,
som tillåter att bokstäver i ett långt ord bryts till en ny rad
egenskapen hyphens,
som aktiverar ordbrytning med stavelsedelning
egenskapen overflow,
som klipper av delar som sticker ut utanför blockets gräns