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
-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

Podpora vlastnosti overflow
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  

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

Pouze vertikální lišta

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.