Overflow-ominaisuus

Ominaisuus overflow määrittää selaimelle, miten käsitellä sisältöä (teksti, kuvat, muita elementtejä), joka ylittää elementin rajat (sen leveyden tai korkeuden). Selain voi piilottaa ylivuotavan osan, lisätä vierityspalkit tai olla tekemättä mitään (jättää nykyiseen tilaan - ylittäen rajat).

Syntaksi

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

Arvot

Arvo	Kuvaus
`hidden`	Piilottaa elementin rajojen ylittävän sisällön.
`scroll`	Lisää vierityspalkit, aina, vaikka mikään ei ylittäisi rajoja (tässä tapauksessa ne eivät ole aktiivisia).
`auto`	Lisää vierityspalkit tarvittaessa: jos sisältö ei mahdu - ne ilmestyvät, jos kaikki mahtuu - niitä ei tule.
`visible`	Ei piilota elementin rajojen ylittävää sisältöä.

Oletusarvo: visible.

Esimerkki . Arvo visible

Tässä esimerkissä erittäin pitkä sana ei mahdu säiliöön ja ylittää sen rajat. Leikkausta ei tapahdu:

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

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

Esimerkki . Arvo visible

Nyt ei ole rajoitettu vain leveyttä, vaan myös korkeutta (teksti ylittää elementin myös korkeudessa):

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

Esimerkki . Arvo hidden

Nyt kaikki, mikä ylittää säiliön rajat leikataan pois (myös korkeudessa). Huomaa, että leikkaus korkeudessa tapahtuu vain, jos se on asetettu nimenomaisesti. Muussa tapauksessa tekstin korkeus määrää säiliön korkeuden - eikä leikkausta tapahdu:

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

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

Esimerkki . Arvo scroll

Arvolla scroll vierityspalkit tulevat aina, vaikka mikään ei ylittäisi rajoja (tässä tapauksessa ne eivät ole aktiivisia). Nyt teksti ei ylitä rajoja leveydessä eikä korkeudessa, mutta vierityspalkit ovat silti olemassa (ei-aktiivisina):

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

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

Esimerkki . Arvo auto

Arvolla auto vierityspalkit lisätään vain, jos sisältö ylittää säiliön rajat. Nyt niitä ei ole, koska kaikki mahtuu:

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

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

Esimerkki . Arvo auto

Rajoitetaan nyt leveyttä - ilmestyy vaakasuuntainen vierityspalkki:

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

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

Katso myös

ominaisuus word-break,
jakaa pitkän sanan kirjaimet uudelle riville
ominaisuus overflow-wrap,
jakaa pitkän sanan kirjaimet uudelle riville
ominaisuus overflow-x,
joka leikkaa vaakasuunnassa ylittävät osat
ominaisuus overflow-y,
joka leikkaa pystysuunnassa ylittävät osat