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 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 |
-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). Lišty jsou tam pak vždy, i když je obsah malý a jako nejsou potřeba. |
(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).
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. Jiný problém s Explorerem a overflow: visible je ten, že procentuální velikost zanořených objektů počítá blbě (a špatně odvozuje začátek souřadnic pro vlastnosti right a bottom). Opera do verze 7 taky občas blbne, v osmičce už by to mělo být v pořádku (ale detailně jsem to netestoval).
V Internet Exploreru fungují nestandardní vlastnosti overflow-x a overflow-y pro oříznutí obsahu jenom v jednom směru.
Prohlížeče se trochu liší v tom, kde a jak případnou lištu vykreslí. Explorer 6 ji kreslí do vnitřku prvku (přesněji tedy do oblasti rozměrů prvku, který má skrolovat), jiné prohlížeče myslím lištu kreslí vně. Protože Explorer vrazí lištu dovnitř a zároveň tím zabere druhému rozměru trochu místa (chybně), tak se pak domnívá, že je potřeba vykreslit lištu i ve druhém rozměru (kde ve skutečnosti není potřeba).
Prohlížeč | Podpora ve verzích | Poznámka |
---|---|---|
Internet Explorer | od verze 7 správně | umí i overflow-x a overflow-y |
Firefox | všechny verze | umí i overflow-x a overflow-y |
Opera | 6, 7 | |
Chrome | 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:
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
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.