Vlastnost overflow

Vlastnost overflow určuje prohlížeči, jak zacházet s obsahem (text, obrázky, další bloky), který přetéká přes hranice bloku (přes jeho šířku nebo výšku). Prohlížeč může skrýt přetékající část, přidat posuvníky nebo nedělat nic (ponechat jak je - přetékající přes hranice).

Syntaxe

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

Hodnoty

Hodnota	Popis
`hidden`	Skryje obsah, který přetéká přes hranice bloku.
`scroll`	Přidá posuvníky, a to vždy, i když nic nepřetéká (v tomto případě budou neaktivní).
`auto`	Přidá posuvníky v případě potřeby: pokud se obsah nevejde - objeví se, pokud se vše vejde - nebudou.
`visible`	Neskrývá obsah, který přetéká přes hranice bloku.

Výchozí hodnota: visible.

Příklad . Hodnota visible

V tomto příkladu se velmi dlouhé slo nevejde do kontejneru a přeteče přes jeho hranice. Ke zkrácení nedochází:

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

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

Příklad . Hodnota visible

Nyní je omezena nejen šířka, ale i výška (text přeteče přes blok i výškově):

<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říklad . Hodnota hidden

Nyní se vše, co přeteklo přes hranice kontejneru, jednoduše ořízne (a to i výškově). Všimněte si, že k ořezávání podle výšky dochází pouze tehdy, když je explicitně zadána. V opačném případě text rozšiřuje kontejner výškově - a k žádnému ořezávání nedojde:

<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říklad . Hodnota scroll

Při hodnotě scroll budou posuvníky vždy, i když nic nepřetéká (v tomto případě budou neaktivní). Nyní text nepřetéká ani šířkově, ani výškově, ale posuvníky stejně jsou (neaktivní):

<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říklad . Hodnota auto

Při hodnotě auto se posuvníky přidají pouze, pokud obsah přetéká přes kontejner. Nyní tam nejsou, protože vše se vejde:

<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říklad . Hodnota auto

A nyní omezíme šířku - objeví se vodorovný 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;
}

Viz také

vlastnost word-break,
která zalomí písmena dlouhého slova na nový řádek
vlastnost overflow-wrap,
která zalomí písmena dlouhého slova na nový řádek
vlastnost overflow-x,
která ořezává části přetékající vodorovně
vlastnost overflow-y,
která ořezává části přetékající svisle