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; 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.
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 |
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.
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 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.
hodnoty | může uživatel prvku s overflow měnit velikost? |
---|---|
none | nedá se měnit velikost |
both | velikost se dá měnit oběma směry |
vertical | velikost se dá měnit pouze vertikálně (šířka bude fixní) |
horizontal | velikost se dá měnit pouze horizontálně (výška bude fixní) |
Zapisuje se nejčastěji třeba takto:
div.roztahovaci {overflow: auto; resize: both; width: 200px; height: 100px;}
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.
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.
Dost debilní je, že nejde nastavit overflow pro tag table, aby to ta table respektovala. Je to tím, že table sama sebe považuje za něco extra, na co neplatí běžná pravidla pro bloky, protože tabulka formálně není blok, ale prostě tabulka (má display: table, ne display: block). Řešení jsou dvě, ale napřed naznačím, co nefunguje:
<div style="width: 600px;">
<table style="overflow: auto">
... (široký obsah)
</table>
</div>
Pokud bude obsah tabulky širší, než nastavená hodnota nadřazeného prvku (v tomto případě divu s 600px), tak se tabulka vykreslí širší, ale žádné rolování nebude dělat - overflow tam bude zbytečné.
První řešení je obalení tabulky do něčeho, co má samo overflow:
<div style="width: 600px;">
<div style="overflow: auto">
<table>
... (široký obsah)
</table>
</div>
</div>
Ne vždycky můžu nebo chci obalovat tabulku dalším divem, takže používám nečestný a nesportovní trik - přidávám tabulce display: block, který ale funguje a podle toho, co vím, nic nerozbíjí:
<div style="width: 600px;">
<table style="display: block;
overflow: auto;">
... (široký obsah)
</table>
</div>
Je to dáno tím, že display je špatně navržená vlastnost a snaží se (blbě) řešit dvě věci najednou.
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
Příklad na scroll-behavior: smooth - animované rolování
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.