Overflow-i omadus

Omadus overflow määrab brauserile, kuidas käituda sisuga (tekst, pildid, teised plokid), mis ulatub välja ploki piiridest (väljapoole selle laiust või kõrgust). Brauser võib peita väljaulatuva osa, lisada kerimisribad või mitte teha midagi (jätta nii nagu on - piiridest välja ulatuvana).

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`hidden`	Peidab selle sisu, mis ulatub ploki piiridest välja.
`scroll`	Lisab kerimisribad, ja alati, isegi kui midagi ei ulatu välja (sel juhul on need mitteaktiivsed).
`auto`	Lisab kerimisribad vajadusel: kui sisu ei mahu - need ilmuvad, kui kõik mahub - neid ei ole.
`visible`	Ei peida seda sisu, mis ulatub ploki piiridest välja.

Vaikeväärtus: visible.

Näide . Väärtus visible

Selles näites väga pikk sõna ei mahu mahutisse ja ulatub välja selle piiridest. Kärpimist ei toimu:

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

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

Näide . Väärtus visible

Nüüd on piiratud mitte ainult laius, vaid ka kõrgus (tekst ulatub välja plokist ka kõrguselt):

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

Näide . Väärtus hidden

Nüüd kõik, mis ulatub välja konteineri piiridest, kärbitakse lihtsalt ära (ka kõrguselt). Pange tähele, et kõrguse järgi kärpimine toimub ainult siis, kui see on selgelt määratud. Vastasel juhul tekst laiendab konteinerit kõrguselt - ja mingit kärpimist ei toimu:

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

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

Näide . Väärtus scroll

Väärtusel scroll kerimisribad on alati, isegi kui midagi ei ulatu välja (sel juhul on need mitteaktiivsed). Praegu tekst ei ulatu välja ei laiuselt ega kõrguselt, kuid kerimisribad on ikkagi olemas (mitteaktiivsed):

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

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

Näide . Väärtus auto

Väärtusel auto kerimisribad lisatakse ainult siis, kui sisu ulatub välja konteinerist. Praegu neid pole, kuna kõik mahub:

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

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

Näide . Väärtus auto

Nüüd piirame laiust - ilmub horisontaalne kerimisriba:

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

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

Vaata ka

omadus word-break,
mis kannab pika sõna tähed uuele reale
omadus overflow-wrap,
mis kannab pika sõna tähed uuele reale
omadus overflow-x,
mis kärbib horisontaalselt väljaulatuvad osad
omadus overflow-y,
mis kärbib vertikaalselt väljaulatuvad osad