CSS - Overflow


Overflow in CSS is een eigenschap waarmee je kunt instellen wat er moet gebeuren als bepaalde content langer wordt dan een aangegeven breedte of hoogte. Stel dat je met een div een tekstvak hebt gemaakt met een hoogte van 200 pixels. Zodra je dan tekst gaat plaatsen en dit past niet in het blok dan zal de div niet automatisch mee gaan schalen en loopt de tekst het het blok uit. Om dit effect nu te voorkomen kan overflow worden gebruikt.

Stel dat je het blok in het geval dat de tekst te lang is van een schuifbalk wilt voorzien dan kun je overflow:auto gebruiken maar er zijn ook andere mogelijkheden, deze hieronder.

  • scroll: Altijd een schuifbalk.
  • auto: Schuifbalk als de tekst te lang is.
  • hidden: Alles langer of breder dan aangegeven wordt niet getoond.
  • visible: Langere of bredere content tonen.

Als voorbeeld zie je hieronder een tekstvak met een ingestelde schuifbalk die in beeld komt als de content te lang is, het vak heeft een breedte van 400 pixels, hoogte 100 pixels.

div.tekstvak {
        width:400px;
        height:100px;
        overflow:scroll;
}


Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce blandit enim eget mauris. Etiam scelerisque lobortis sapien. Cras consequat orci sed neque. Aliquam placerat mauris vulputate leo. Curabitur porta, arcu id ullamcorper rutrum, urna libero condimentum sem, in varius enim nulla id tellus. Integer eget ipsum a sem pellentesque mollis. Sed euismod leo ut purus. In congue nibh vel quam. Donec lorem mauris, scelerisque at, semper eu, pulvinar et, turpis. Nulla facilisi. Praesent tellus velit, ornare eu, rutrum ut, posuere non, erat. Morbi lacus tortor, aliquet quis, pharetra ac, convallis ultrices, erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce blandit enim eget mauris. Etiam scelerisque lobortis sapien. Cras consequat orci sed neque. Aliquam placerat mauris vulputate leo. Curabitur porta, arcu id ullamcorper rutrum, urna libero condimentum sem, in varius enim nulla id tellus. Integer eget ipsum a sem pellentesque mollis. Sed euismod leo ut purus. In congue nibh vel quam. Donec lorem mauris, scelerisque at, semper eu, pulvinar et, turpis. Nulla facilisi. Praesent tellus velit, ornare eu, rutrum ut, posuere non, erat. Morbi lacus tortor, aliquet quis, pharetra ac, convallis ultrices, erat.

De code van het tekstvak hierboven is als volgt:

div.tekstvak {
        width:483px;
        height:100px;
        padding:5px;
        border:1px solid #B8CADA;
        background-color:#FF6F26;
        color:#FFFFFF;
        font-size:8pt;
        overflow:scroll;
        overflow-x:hidden;
}