o tvorbě, údržbě a zlepšování internetových stránek
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.
V určitých případech se dají zobrazit jenom některé lišty.
Horizontální skrollování ve více prohlížečích - příklad na overflow-x.
Pokus s CSS vlastností overflow
Větší příklad na vlastnost overflow (plus pozicování)
CSS vlastnost overflow (hodně podobný prvnímu příkladu)
Horizontální skrollování ve více prohlížečích - příklad
Oříznutí tabulky nebo buňky, aby se vešly
Jak psát web píše Yuhů, Dušan Janovský. Poslední aktualizace 01. května 2004.