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í