Egenskaben overflow

Egenskaben overflow angiver til browseren, hvordan den skal håndtere indhold (tekst, billeder, andre blokke), som flyder ud over blokkens grænser (ud over dens bredde eller højde). Browseren kan skjule den overløbende del, tilføje rullebjælker eller gøre ingenting (lade det være som det er - flydende ud over grænserne).

Syntaks

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

Værdier

Værdi	Beskrivelse
`hidden`	Skjuler det indhold, der flyder ud over blokkens grænser.
`scroll`	Tilføjer rullebjælker, og det altid, selvom intet flyder ud (i dette tilfælde vil de være inaktive).
`auto`	Tilføjer rullebjælker når det er nødvendigt: hvis indholdet ikke kan være - vil de blive vist, hvis alt kan være - vil de ikke være der.
`visible`	Skjuler ikke det indhold, der flyder ud over blokkens grænser.

Standardværdi: visible.

Eksempel . Værdien visible

I dette eksempel vil et meget langt ord ikke kunne være i containeren og vil flyde ud over dens grænser. Afskæring sker ikke:

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

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

Eksempel . Værdien visible

Nu er højden også begrænset, ikke kun bredden (teksten vil flyde ud over blokken både i højden og bredden):

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

Eksempel . Værdien hidden

Nu vil alt, der flyder ud over containerens grænser blive afskåret (både i højden og bredden). Læg mærke til, at afskæring i højden kun sker, når den er angivet eksplicit. I modsat tilfælde vil teksten udvide containeren i højden - og ingen afskæring vil forekomme:

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

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

Eksempel . Værdien scroll

Med værdien scroll vil rullebjælkerne altid være der, selvom intet flyder ud (i dette tilfælde vil de være inaktive). Lige nu flyder teksten ikke ud hverken i bredden eller højden, men rullebjælkerne er der alligevel (inaktive):

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

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

Eksempel . Værdien auto

Med værdien auto tilføjes rullebjælker kun, hvis indholdet flyder ud over containeren. Lige nu er der ingen, da alt kan være:

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

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

Eksempel . Værdien auto

Nu begrænser vi bredden - der vil vises en vandret rullebjælke:

<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 også

egenskaben word-break,
der bryder lange ord over på en ny linje
egenskaben overflow-wrap,
der bryder lange ord over på en ny linje
egenskaben overflow-x,
som afskærer dele, der flyder ud vandret
egenskaben overflow-y,
som afskærer dele, der flyder ud lodret