Egenskapen overflow

Egenskapen overflow forteller nettleseren hvordan den skal håndtere innhold (tekst, bilder, andre blokker) som flyter utenfor grensene til blokken (utenfor dens bredde eller høyde). Nettleseren kan skjule den delen som flyter ut, legge til rullefelt eller ikke gjøre noe (la det være som det er - flytende utenfor grensene).

Syntaks

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

Verdier

Verdi	Beskrivelse
`hidden`	Skjuler innholdet som flyter utenfor blokkens grenser.
`scroll`	Legger til rullefelt, og det alltid, selv om ingenting flyter ut (i så fall vil de være inaktive).
`auto`	Legger til rullefelt ved behov: hvis innholdet ikke får plass - vil de vises, hvis alt får plass - vil de ikke vises.
`visible`	Skjuler ikke innholdet som flyter utenfor blokkens grenser.

Standardverdi: visible.

Eksempel . Verdien visible

I dette eksemplet vil et veldig langt ord ikke få plass i beholderen og vil flyte utenfor dens grenser. Klipping skjer ikke:

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

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

Eksempel . Verdien visible

Nå er ikke bare bredden begrenset, men også høyden (teksten vil flyte utenfor blokken både i bredde og høyde):

<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 . Verdien hidden

Nå vil alt som flyter utenfor beholderens grenser blir kuttet av (både i høyde og bredde). Legg merke til at klipping i høyde skjer bare når den er eksplisitt satt. Ellers vil teksten utvide beholderen i høyde - og ingen klipping vil skje:

<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 . Verdien scroll

Med verdien scroll vil rullefelt vises alltid, selv om ingenting flyter ut (i så fall vil de være inaktive). Nå flyter ikke teksten ut verken i bredde eller høyde, men rullefelt er likevel til stede (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 . Verdien auto

Med verdien auto legges rullefelt til bare hvis innholdet flyter ut utenfor beholderen. Nå er de ikke til stede, siden alt får plass:

<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 . Verdien auto

Nå begrenser vi bredden - en horisontal rullefelt vil vises:

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

egenskapen word-break,
som bryter bokstavene i et langt ord over på en ny linje
egenskapen overflow-wrap,
som bryter bokstavene i et langt ord over på en ny linje
egenskapen overflow-x,
som kutter av deler som flyter ut horisontalt
egenskapen overflow-y,
som kutter av deler som flyter ut vertikalt