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; je vidět; přetečený text ale nedostává místo v dokumentu, takže může překrývat následující obsah
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; nelze rolovat; co se nevejde, se nezobrazí; žádná rolovací lišta
2 hodnoty oddělené mezerou první hodnota se vztahuje ke směru x, druhá hodnota pro směr y

(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).

Dále fungují vlastnosti overflow-x a overflow-y pro oříznutí obsahu jenom v jednom směru. Mají stejné hodnoty, tedy visible, auto, scroll a hidden. Pro úsporu času se můžou zapisovat i do vlastnosti overflow za sebe oddělené mezerou.

Další CSS vlastnosti, které s overflow úzce souvisí, jsou Resize a Scrollbar-gutter. Resize umožňuje uživateli změnu velikosti prvku tažením za spodní růžek. Scrollbar-gutter umí bránit poskakování při objevení se rolovací lišty tím, že na ni prostě vždy vyhradí místo předem.

Podpora

Podpora vlastnosti overflow
Prohlížeč Podpora ve verzích
Internet Explorer od verze 7 správně
Firefox všechny verze
Opera všechny verze
Chrome všechny verze

Příklady

Oříznutý element se dělá pomocí verflow: hidden. Takovým textem nelze nijak scrollovat, ani na dotykovém zařízení.

<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. Na dotykových zařízeních se nepřidávají, ale text se dá rolovat prstem.

<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: visible nechá obsah z prvku vytékat, pokud je delší. Přitom vytékaný text může překrýt následující obsah. Trochu se to podobá absolutnímu pozicování, ale je to prostě jenom vytékání. Je to totéž, jako kdyby se overflow vůbec nepoužilo. (Omluva: měl jsem tu roky chybně místo visible uvedenu hodnotu none, která ale neexistuje.)

<div style="width: 200px; height: 86px; overflow: visible">
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: overflow-x: auto;

Pouze vertikální lišta: overflow-y: auto;

Resize

Resize je další relativně nová CSS vlastnost, která umožňuje tažením myši nebo prstu za růžek prvku měnit prvku velikost. Je to stejný efekt, jaký je často k vidění u prvků <textarea>.

Na stránce o overflow to zmiňuju, protože aby resize fungovalo, musí mít prvek nastavenu overflow na nějakou rolovací hodnotu, tedy auto, hidden nebo scroll. Nastavené rozměry mít resizovací prvek nemusí, ale je to samozřejmě lepší. Proč to musí mít overflow? Aby bylo jasné, co se má stát s obsahem, který se do uživatelem zmenšeného prvku nevejde.

scrollbar-gutter
hodnoty zobrazení rolovací lišty
auto nic nedělá
stable vyčlení místo pro rolovací lištu i v situacích, kdy text nepřetéká; typicky vpravo od obsahu
stable both-edges vyčlení místo pro rolovací lištu vždy a na obou stranách

Zapisuje se nejčastěji takto:

div.roztahovaci {overflow: auto; resize: both; width: 200px; height: 100px;}

Scrollbar-gutter

Scrollbar-gutter je další CSS vlastnost úzce svázaná s overflow. Protože má smysl používat ji jen v souvislosti s overflow.

Scrollbar-gutter určuje, jestli se vyhradí místo na rolovací lištu i v situaci, kdy není potřeba. Také umí zařídit, že se místo uvolní i po té straně prvku, kde se lišta normálně nezobrazuje, čímž se dosáhne efektu symetrie.

scrollbar-gutter
hodnoty zobrazení rolovací lišty
auto nic nedělá
stable vyčlení místo pro rolovací lištu i v situacích, kdy text nepřetéká; typicky vpravo od obsahu
stable both-edges vyčlení místo pro rolovací lištu vždy a na obou stranách

Jak určitě chápete, hodí se scrollbar-gutter v situacích, kdy potřebuju, aby mi layout neposkakoval jen kvůli tomu, že se u něčeho s overflow: auto zjevila rolovací lišta.

příklad:

div.hezounky {overflow: auto; scrollbar-gutter: stable both-edges;}

Podpora postupně od roku 2021, nejdříve v Chrome. Příklad mám už ve výše zmíněném příkladu na vlastnost overflow.

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, extra rychlý SSD webhosting s doménou v ceně
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.