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.
hodnoty | zacházení s přetečeným obsahem |
---|---|
visible | nechá se přetékat |
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 |
-moz-scrollbars-vertical -moz-scrollbars-horizontal -moz-scrollbars-none |
zobrazení rolovacích lišt pouze v určitém směru. Nestandardní hodnoty fungující pouze v Mozille (vykreslovací jádro Gecko). |
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).
Hodnota visible se chová v Internet Exploreru jinak než ve standardních prohlížečích. Pokud obsah prvku přetéká rozměry, Internet Explorer prvek automaticky zvětší, takže např. rámeček vykreslí až pod obsahem. Oproti tomu Mozilla a jiné standardní prohlížeče kreslí spodní rámeček tam, kde končí uvedený rozměr.
V Internet Exploreru fungují nestandardní vlastnosti overflow-x a overflow-y pro oříznutí obsahu jenom v jednom směru.
Prohlížeč | Podpora ve verzích | Poznámka |
---|---|---|
4, 5, 5.5, 6 | ||
Mozilla (Netscape 6+) | všechny verze | |
Opera | 6, 7 | ve verzi 5 je podpora divná |
Konqueror | ano | |
IE 5 / Mac | ano | |
Netscape Navigator 4 | ano |
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.
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
V určitých případech se dají zobrazit jenom některé lišty:
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.