Vlastnosť overflow

Vlastnosť overflow určuje prehliadaču, ako zaobchádzať s obsahom (text, obrázky, iné bloky), ktorý preteká cez hranice bloku (mimo jeho šírky alebo výšky). Prehliadač môže skryť pretekajúcu časť, pridať posuvníky alebo neurobiť nič (ponechať ako je - pretekajúce cez hranice).

Syntax

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

Hodnoty

Hodnota	Popis
`hidden`	Skryje obsah, ktorý preteká cez hranice bloku.
`scroll`	Pridá posuvníky, a to vždy, aj keď nič nepreteká (v tomto prípade budú neaktívne).
`auto`	Pridá posuvníky v prípade potreby: ak sa obsah nezmestí - objavia sa, ak sa všetko zmestí - nebudú.
`visible`	Neskrýva obsah, ktorý preteká cez hranice bloku.

Predvolená hodnota: visible.

Príklad . Hodnota visible

V tomto príklade sa veľmi dlhé slovo nezmestí do kontajnera a pretečie cez jeho hranice. K orezu nedochádza:

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

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

Príklad . Hodnota visible

A teraz je obmedzená nielen šírka, ale aj výška (text pretečie cez blok aj výškou):

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

Príklad . Hodnota hidden

Teraz sa všetko, čo preteká cez hranice kontajnera jednoducho oreže (aj výškou). Dávajte pozor na to, že k orezaniu výšky dochádza iba vtedy, keď je explicitne zadaná. V opačnom prípade text rozširuje kontajner výškou - a k žiadnemu orezaniu nedôjde:

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

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

Príklad . Hodnota scroll

Pri hodnote scroll budú posuvníky vždy, aj keď nič nepreteká (v tomto prípade budú neaktívne). Teraz text nepreteká ani šírkou, ani výškou, ale posuvníky sú aj tak (neaktívne):

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

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

Príklad . Hodnota auto

Pri hodnote auto sa posuvníky pridajú iba vtedy, ak obsah preteká cez kontajner. Teraz nie sú, pretože všetko sa zmestí:

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

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

Príklad . Hodnota auto

A teraz obmedzíme šírku - objaví sa horizontálny posuvník:

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

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

Pozri tiež

vlastnosť word-break,
ktorá zalomí písmená dlhého slova na nový riadok
vlastnosť overflow-wrap,
ktorá zalomí písmená dlhého slova na nový riadok
vlastnosť overflow-x,
ktorá oreže časti pretekajúce horizontálne
vlastnosť overflow-y,
ktorá oreže časti pretekajúce vertikálne