De overflow eigenschap

De eigenschap overflow vertelt de browser hoe om te gaan met inhoud (tekst, afbeeldingen, andere blokken) die buiten de grenzen van het blok steekt (buiten zijn breedte of hoogte). De browser kan het uitstekende deel verbergen, schuifbalken toevoegen of niets doen (het zo laten - uitstekend buiten de grenzen).

Syntaxis

selector {
	overflow: hidden | scroll | auto | visible;
}

Waarden

Waarde	Beschrijving
`hidden`	Verbergt de inhoud die buiten de grenzen van het blok steekt.
`scroll`	Voegt schuifbalken toe, en wel altijd, zelfs als er niets uitsteekt (in dat geval zijn ze inactief).
`auto`	Voegt schuifbalken toe indien nodig: als de inhoud niet past - verschijnen ze, als alles past - zijn ze er niet.
`visible`	Verbergt de inhoud die buiten de grenzen van het blok steekt niet.

Standaardwaarde: visible.

Voorbeeld . Waarde visible

In dit voorbeeld past een heel lang woord niet in de container en steekt buiten zijn grenzen. Afkappen vindt niet plaats:

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

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

Voorbeeld . Waarde visible

En nu is niet alleen de breedte beperkt, maar ook de hoogte (de tekst steekt buiten het blok, ook in de hoogte):

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

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

Voorbeeld . Waarde hidden

Nu wordt alles wat buiten de grenzen van de container steekt eenvoudigweg afgekapt (ook in de hoogte). Let op dat afkappen in de hoogte alleen plaatsvindt wanneer deze expliciet is ingesteld. Anders breidt de tekst de container uit in de hoogte - en zal er geen afkapping plaatsvinden:

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

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

Voorbeeld . Waarde scroll

Bij de waarde scroll zullen schuifbalken er altijd zijn, zelfs als er niets uitsteekt (in dat geval zijn ze inactief). Nu steekt de tekst er noch in de breedte, noch in de hoogte uit, maar er zijn toch schuifbalken (inactieve):

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

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Voorbeeld . Waarde auto

Bij de waarde auto worden schuifbalken alleen toegevoegd als de inhoud buiten de container steekt. Nu zijn ze er niet, omdat alles past:

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

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Voorbeeld . Waarde auto

En nu beperken we de breedte - er verschijnt een horizontale schuifbalk:

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

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

Zie ook

de eigenschap word-break,
die letters van een lang woord naar een nieuwe regel afbreekt
de eigenschap overflow-wrap,
die letters van een lang woord naar een nieuwe regel afbreekt
de eigenschap overflow-x,
die uitstekende horizontale delen afkapt
de eigenschap overflow-y,
die uitstekende verticale delen afkapt