Az overflow tulajdonság

Az overflow tulajdonság megadja a böngészőnek, hogyan kezelje a blokk határain (szélességén vagy magasságán) kívülre nyúló tartalmat (szöveg, képek, más blokkok). A böngésző elrejtheti a kiálló részt, görgetősávokat adhat hozzá, vagy nem csinál semmit (így hagyja, hogy kiálljon a határokon túl).

Szintaxis

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

Értékek

Érték	Leírás
`hidden`	Elrejti a blokk határain túlnyúló tartalmat.
`scroll`	Görgetősávokat ad hozzá, mindig, még akkor is, ha semmi nem nyúl ki (ebben az esetben inaktívak lesznek).
`auto`	Görgetősávokat ad hozzá szükség esetén: ha a tartalom nem fér el - megjelennek, ha minden elfér - nem lesznek.
`visible`	Nem rejti el a blokk határain túlnyúló tartalmat.

Alapértelmezett érték: visible.

Példa . Visible érték

Ebben a példában egy nagyon hosszú szó nem fér el a tárolóban, és ki fog nyúlni a határain túl. Nem fog levágódni:

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

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

Példa . Visible érték

Most nem csak a szélesség, hanem a magasság is korlátozva van (a szöveg a blokk fölött is ki fog nyúlni):

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

Példa . Hidden érték

Most minden, ami a tároló határain túlnyúlik, egyszerűen levágódik (a magasságnál is). Figyelj arra, hogy a magasság szerinti vágás csak akkor történik meg, ha az explicit meg van adva. Ellenkező esetben a szöveg magasságban kitágítja a tárolót - és nem történik levágás:

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

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

Példa . Scroll érték

A scroll értéknél a görgetősávok mindig megjelennek, még akkor is, ha semmi nem nyúl ki (ebben az esetben inaktívak lesznek). Most a szöveg nem nyúlik ki sem szélességben, sem magasságban, de a görgetősávok mégis megvannak (inaktívak):

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

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

Példa . Auto érték

A auto értéknél a görgetősávok csak akkor jelennek meg, ha a tartalom kilóg a tárolóból. Most nincsenek, mert minden elfér:

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

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

Példa . Auto érték

Most korlátozzuk a szélességet - vízszintes görgetősáv jelenik meg:

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

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

Lásd még

a word-break tulajdonság,
amely egy hosszú szó betűit új sorba tördelheti
a overflow-wrap tulajdonság,
amely egy hosszú szó betűit új sorba tördelheti
a overflow-x tulajdonság,
amely a vízszintesen kiálló részeket vágja le
a overflow-y tulajdonság,
amely a függőlegesen kiálló részeket vágja le