Låt oss undersöka hur vi kan kontrollera innehållsöverflödet med hjälp av en egenskap. Ibland har vi ett fast width och height på elementet. Dock kan det inre innehållet vara mycket större än det tillgängliga utrymmet. Egenskapen overflow styr beteendet för ett elements innehåll när det överskrider de explicit satta värdena för height eller width.

overflow: visible | scroll | hidden | auto

• visible – är standardvärdet. Innehållet flödar utanför elementets gränser och förblir synligt;
• scroll – Innehållet flödar utanför elementets gränser, och en rullningslist visas som gör det möjligt för användaren att rulla både vertikalt och horisontellt;
• hidden – Innehållet som flödar utanför elementets gränser kapas och är inte synligt;
• auto – fungerar på samma sätt som scroll. Dock visas rullningslister endast när innehållet flödar utanför elementets gränser.

Notera

Det överflödiga innehållet påverkar inte andra elementens geometri.

visible

Om egenskapen overflow inte är satt, är dess standardvärde visible. Det innebär att innehållet kommer att visas utanför elementets gränser. I exemplet är boxens gränser markerade i darkblue, och boxen har fasta egenskaper för width och height.

scroll

Vi kan visa hela elementets innehåll med hjälp av en rullningslist. Låt oss titta på exemplet:

hidden

Allt överflödigt innehåll kommer att döljas och användaren kommer aldrig att se det. Generellt är detta endast användbart när dekorativa effekter behöver skapas.