Příklady na overflow

Overflow: hidden

bez rolovací lišty. Textem nelze rolovat. Ani na dotykovém zařízení.
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: scroll

s rolovací lištou, která bude zobrazena vždy, i kdyby text byl krátký. Prohlížeče se liší v tom, jak to zobrazují. Zda zobrazí i horizontální lištu. Navíc dotyková zařízení lištu nezobrazují, až když se prstem roluje.
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: auto

rolovací lišta se zobrazí, když je potřeba. Na dotykovém zařízení půjde textem rolovat, pokud je větší než velikost prvku.
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: auto; ale bez nastavených rozměrů

rolovací lišta se zobrazí, když je potřeba. Na dotykovém zařízení půjde textem rolovat, pokud je větší než velikost prvku.
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: visible

Text z prvku může vytékat mimo jeho rozměry. Přetečený text může zasahovat do dalších prvků a být jimi překrýván. Jako by overflow nebylo.
dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text dlouhý text

Overflow: auto; scrollbar-gutter: stable

Rolovací lišta se zobrazí, když je potřeba, ale vpravo na ni bude vždy místo.
dlouhý xtext dlouhý x text dlouhý text x dlouhý textx dlouhý text dlouhý text dlouhý text xdlouhý text x dlouhý text dlouhý textx dlouhýx text dlouhý text dlouhý text dlouhý text dlouhý text x dlouhý text dlouhý text dlouhý text

Overflow: auto; scrollbar-gutter: stable both-edges

rolovací lišta se zobrazí, když je potřeba. Zároveň se vlevo udělalo prázdné místo (něco jako padding) ve stejné šířce, jako má pravá rolovací lišta. Ať už zobrazená je, nebo není.
dlouhý xtext dlouhý x text dlouhý text x dlouhý textx dlouhý text dlouhý text dlouhý text xdlouhý text x dlouhý text dlouhý textx dlouhýx text dlouhý text dlouhý text dlouhý text dlouhý text x dlouhý text dlouhý text dlouhý text



Všechny divy nesou styl
div {resize: both; outline: 1px dotted orange;}
to aby šly rozšiřovat a měnit velikost. Resize funguje právě jen s nastavenou overflow. Můžete si všimnout, že overflow: visible jako by nebylo, takže resize u něj nefunguje.

Příklad se vztahuje k css vlastnosti overflow a k výkladu o ořezu a skrolování