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.
| 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).
Podpora
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 4, 5, 5.5, 6 | Přetékající text s overflow: visible v Exploreru chybně zvětšuje velikost objektu. Umí i overflow-x a overflow-y | |
| Mozilla (Firefox, Netscape 6+ atd.) | všechny verze | umí i overflow-x a overflow-y |
| Opera | 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | ano |
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:
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
