Egenskapen overflow

Egenskapen overflow anger webbläsaren hur den ska hantera innehåll (text, bilder, andra block) som flyter utanför blockets gränser (bortom dess bredd eller höjd). Webbläsaren kan dölja den överflödande delen, lägga till rullningslister eller inte göra någonting (lämna det som det är - flytande utanför gränserna).

Syntax

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

Värden

Värde	Beskrivning
`hidden`	Döljer det innehåll som flyter utanför blockets gränser.
`scroll`	Lägger till rullningslister, och det alltid, även om ingenting flyter över (i så fall kommer de att vara inaktiva).
`auto`	Lägger till rullningslister vid behov: om innehållet inte får plats - kommer de att visas, om allt får plats - kommer de inte att finnas där.
`visible`	Döljer inte det innehåll som flyter utanför blockets gränser.

Standardvärde: visible.

Exempel . Värdet visible

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

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

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

Exempel . Värdet visible

Och nu är inte bara bredden begränsad, utan även höjden (texten kommer att flyta över blocket även i höjdled):

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

Exempel . Värdet hidden

Nu kommer allt som flyter utanför containerns gränser att klippas av (även i höjdled). Var uppmärksam på att avklippning i höjdled endast sker när höjden är explicit angiven. I annat fall kommer texten att utöka containerns höjd - och ingen avklippning kommer att ske:

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

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

Exempel . Värdet scroll

Med värdet scroll kommer rullningslister alltid att finnas, även om ingenting flyter över (i så fall kommer de att vara inaktiva). Just nu flyter texten inte över varken i bredd eller höjd, men rullningslisterna finns ändå där (inaktiva):

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

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

Exempel . Värdet auto

Med värdet auto läggs rullningslister till endast om innehållet flyter över containern. Just nu finns de inte, eftersom allt får plats:

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

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

Exempel . Värdet auto

Och nu begränsar vi bredden - en horisontell rullningslist kommer att visas:

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

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

Se även

egenskapen word-break,
som bryter bokstäverna i ett långt ord på en ny rad
egenskapen overflow-wrap,
som bryter bokstäverna i ett långt ord på en ny rad
egenskapen overflow-x,
som klipper av delar som flyter ut horisontellt
egenskapen overflow-y,
som klipper av delar som flyter ut vertikalt