Savybė overflow

Savybė overflow nurodo naršyklei, kaip elgtis su turiniu (tekstas, paveikslėliai, kiti blokai), kuris išsikiša už bloko ribų (už jo pločio ar aukščio). Naršyklė gali paslėpti išsikišusią dalį, pridėti slinkimo juostas arba nieko nedaryti (palikti taip, kaip yra - išsikišusią už ribų).

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`hidden`	Paslepia tą turinį, kuris išsikiša už bloko ribų.
`scroll`	Prideda slinkimo juostas, ir tai visada, net jei niekas neišsikiša (tokiu atveju jos bus neaktyvios).
`auto`	Prideda slinkimo juostas pagal poreikį: jei turinys ne sutelpa - jos atsiras, jei viskas telpa - jų nebus.
`visible`	Neslepia to turinio, kuris išsikiša už bloko ribų.

Numatytoji reikšmė: visible.

Pavyzdys . Reikšmė visible

Šiame pavyzdyje labai ilgas žodis netilps į konteinerį ir išsikiš už jo ribų. Apkirpimo neįvyks:

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

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

Pavyzdys . Reikšmė visible

O dabar apribotas ne tik plotis, bet ir aukštis (tekstas išsikiš už bloko ir pagal aukštį):

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

Pavyzdys . Reikšmė hidden

Dabar viskas, kas išsikišė už konteinerio ribų, bus tiesiog apkirpta (ir pagal aukštį taip pat). Atkreipkite dėmesį į tai, kad apkirpimas pagal aukštį įvyksta tik tada, kai jis yra aiškiai nustatytas. Priešingu atveju tekstas išplečia konteinerį pagal aukštį - ir jokio apkirpimo nebus:

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

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

Pavyzdys . Reikšmė scroll

Esant reikšmei scroll slinkimo juostos bus visada, net jei niekas neišsikiša (tokiu atveju jos bus neaktyvios). Dabar tekstas neišsikiša nei pagal plotį, nei pagal aukštį, bet slinkimo juostos vis tiek yra (neaktyvios):

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

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

Pavyzdys . Reikšmė auto

Esant reikšmei auto slinkimo juostos pridedamos tik tada, jei turinys išsikiša už konteinerio. Dabar jų nėra, nes viskas sutelpa:

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

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

Pavyzdys . Reikšmė auto

O dabar apribosime plotį - atsiras horizontali slinkimo juosta:

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

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

Taip pat žiūrėkite

savybė word-break,
perkelianti ilgo žodžio raides į naują eilutę
savybė overflow-wrap,
perkelianti ilgo žodžio raides į naują eilutę
savybė overflow-x,
kuri apkerta horizontaliai išsikišusias dalis
savybė overflow-y,
kuri apkerta vertikaliai išsikišusias dalis