La oss se på hvordan vi kan kontrollere overløp av innhold ved hjelp av én egenskap. Noen ganger har vi en fastsatt width og height på elementet. Likevel kan det hende at det indre innholdet er mye større enn tilgjengelig plass. Egenskapen overflow styrer hvordan innholdet i et element oppfører seg når det overskrider de eksplisitt angitte verdiene for height eller width.

overflow: visible | scroll | hidden | auto

• visible – er standardverdien. Innholdet flyter utenfor elementets kanter og forblir synlig;
• scroll – Innholdet flyter utenfor elementets kanter, og det vises en rullefelt som lar brukeren bla både vertikalt og horisontalt;
• hidden – Innholdet som flyter utenfor elementets kanter blir klippet og ikke synlig;
• auto – fungerer på samme måte som scroll. Men rullefelt vises kun når innholdet flyter utenfor elementets kanter.

Merk

Overflytende innhold påvirker ikke geometrien til andre elementer.

visible

Hvis overflow-egenskapen ikke er satt, er standardverdien visible. Det betyr at innholdet vil vises utenfor elementets kanter. I eksemplet er boksens kanter markert med darkblue, og boksen har faste egenskaper for width og height.

scroll

Hele elementinnholdet kan vises ved hjelp av en rullefelt. Se eksempelet:

hidden

Alt overflødig innhold vil bli skjult, og brukeren vil aldri se det. Dette er vanligvis nyttig kun når vi trenger å lage dekorative effekter.