Eigenschap text-overflow

De eigenschap text-overflow voegt een beletselteken toe aan het einde van afgekapte tekst om aan te geven dat de tekst niet in het blok paste en is afgekapt.

Om de eigenschap te laten werken, moet de tekst worden afgekapt via de eigenschap overflow of de eigenschap overflow-x met de waarde hidden, auto of scroll. Als visible is ingesteld (en dat is standaard het geval) - zal text-overflow niet werken.

Syntaxis

selector {
	text-overflow: ellipsis | clip;
}

Waarden

Waarde	Beschrijving
`ellipsis`	Voegt een beletselteken toe aan het einde van afgekapte tekst.
`clip`	Voegt geen beletselteken toe (dit is de standaardwaarde, nodig om de werking van de eigenschap ongedaan te maken indien nodig).

Standaardwaarde: clip.

Voorbeeld . Uitstekende tekst

In dit voorbeeld past een heel lang woord niet in de container en zal het buiten de grenzen uitsteken. Er vindt geen afkapping plaats:

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

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

Voorbeeld . We voegen de overflow eigenschap toe

Nu wordt alles wat buiten de grenzen van de container uitsteekt, eenvoudigweg afgekapt:

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

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

Voorbeeld . De waarde ellipsis

Nu voegen we, naast de eigenschap overflow, ook text-overflow toe met de waarde ellipsis. Aan de afgekapte tekst wordt een beletselteken toegevoegd aan het einde:

<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 schuifbalken

Als je overflow: auto en text-overflow: ellipsis instelt, dan verschijnt er een schuifbalk, maar het beletselteken wordt nog steeds toegevoegd. Probeer de schuifbalk in het voorbeeld te schuiven:

<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 . Als er geen hele lange woorden zijn

Als er geen woorden zijn die zo lang zijn dat ze buiten de grenzen van de container uitsteken, dan vindt er geen afkapping plaats (er steekt immers niets uit). Bekijk het 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 . Tekst op één regel

Er zijn echter situaties waarin we willen dat de tekst wordt afgekapt als hij te lang is (de tekst in het algemeen, niet afzonderlijke woorden) en niet wordt afgebroken naar de volgende regel. Dit wordt gedaan door de eigenschap white-space toe te voegen met de waarde nowrap, wat afbreken van tekst naar een andere regel verbiedt. Bekijk het voorbeeld, nu wordt de tekst afgekapt:

<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 percentages

Als je de breedte van het blok in % instelt, zal het afkappen ook correct werken:

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

Zie ook

eigenschappen word-break en overflow-wrap,
die het mogelijk maken letters van een lang woord naar een nieuwe regel af te breken
eigenschap hyphens,
die afbreking van woorden in lettergrepen inschakelt
eigenschap overflow,
die uitstekende delen buiten de grenzen van het blok afkapt