Overflow

CSS vlastnost overflow určuje, jak se bude zacházet s obsahem, který vyteče z rozměru prvku. Zejména jde o možnost přidání rolovacích lišt.

overflow
hodnoty zacházení s přetečeným obsahem
visible nechá se přetékat a je vidět
auto nenechá se přetékat; je-li potřeba, zobrazí se rolovací lišta
scroll nenechá se přetékat; rolovací lišta se zobrazí vždy, i když není potřeba
hidden nenechá se přetékat; co se nevejde, se nezobrazí, žádná rolovací lišta
2 hodnoty oddělené mezerou první hodnota se vztahuje ke směru x, druhá hodnota pro směr y

(Podrobně o této vlastnosti pojednávám také v jiném textu ořez a skrollování, kde zmiňuju taky overflow-x.)

Vlastnost overflow se dá použít pouze u prvků, které mají nastavené rozměry, tedy alespoň width nebo height. Jedná se výborný způsob, jak prvkům přidávat rolovací lišty (overflow: auto).

Dále fungují vlastnosti overflow-x a overflow-y pro oříznutí obsahu jenom v jednom směru. Mají stejné hodnoty, tedy visible, auto, scroll a hidden. Pro úsporu času se můžou zapisovat i do vlastnosti overflow za sebe oddělené mezerou.

Podpora

Podpora vlastnosti overflow
Prohlížeč Podpora ve verzích
Internet Explorer od verze 7 správně
Firefox všechny verze
Opera všechny verze
Chrome všechny verze

Příklady

Oříznutý element se dělá pomocí verflow: hidden.

<div style="width: 200px; height: 86px; overflow: hidden">
dlouhý text bude oříznutý, doslova useknutý, na okraji prvku
</div>

Rolovací lišty se dají přidat prvku vždy pomocí hodnoty scroll:

<div style="width: 200px; height: 86px; overflow: scroll">
dlouhý text bude mít rolovací lišty, i když bude krátký
</div>

Rolovací lišty se mohou zobrazovat, jenom když je to potřeba, to dělá hodnota auto:

<div style="width: 200px; height: 86px; overflow: auto">
dlouhý text bude mít rolovací lišty, krátký ne
</div>

Hodnota overflow: none je to samé, jako když se overflow nezadá. Obsah prvku může přetékat:

<div style="width: 200px; height: 86px; overflow: none">
dlouhý text přeteče přes rozměry elementu
</div>

Zobrazit tento příklad na vlastnost overflow.

Pouze jedna lišta, ne obě

V určitých případech se dají zobrazit jenom některé lišty:

Pouze horizontální lišta: overflow-x: auto;

Pouze vertikální lišta: overflow-y: auto;

Další příklady:

Pokus s CSS vlastností overflow

Větší příklad na vlastnost overflow (plus pozicování)

CSS vlastnost overflow (hodně podobný prvnímu příkladu)

Oříznutí tabulky nebo buňky, aby se vešly

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.