CSS vlastnost overflow urΦuje, jak se bude zachßzet s obsahem, kter² vyteΦe z rozm∞ru prvku.
| 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 |
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φ 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
Width = ╣φ°ka, Height = v²╣ka, Clip = ost°ihnutφ, Text-overflow = ·prava o°φznutΘho textu v IE
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek