CSS2 Overflow Property

The CSS2 overflow property specifies what should happen if content is more than an element's height. CSS overflow property allow you to specify whether to clip content, render scroll bars or display overflow content. Note: The overflow property only works for block elements with a specified height. Overflow property value can be as follows:

Property ValueDescription
visible This is the default value of overflow, it describes the text will be overflow outside the box if the contents is too big.
hidden Only the overflow content that are not clipped in the element will be hidden.
scroll Scrollbar will appear to scroll the overflow contents. Scrollbar's are always appear whether it is required or not.
auto Scrollbar will appear only if the contents is too big to fit in an HTML element. Otherwise, the scrollbar will be hidden.

Example 1: CSS Overflow property

<style>
    p{
        height: 100px;
        background-color: rgba(150,100,255,.1);
        font-size: 20px;
        padding: 10px 20px;
        border: 1px solid;
        overflow: auto;
    }
</style>
<body>
    <p>Overflow example in paragraph<br>
    Overflow example in paragraph<br>
    Overflow example in paragraph<br>
    Overflow example in paragraph<br>
    Overflow example in paragraph<br>
    Overflow example in paragraph<br>
    Overflow example in paragraph<br>
    Overflow example in paragraph<br>
    Overflow example in paragraph<br>
    Overflow example in paragraph</p>
</body>
<html>

CSS3 Overflow Property

CSS3 also defines the overflow-x and overflow-y properties, which allow you to independently control of the vertical and horizontal scrolling. CSS3 Overflow has 2 new properties. Overflow-x and Overflow-y

CSS3 overflow-x property

The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it is overflows at the left and right edges. Possible values can be overflow-x: visible | hidden | scroll | auto

CSS3 overflow-y property

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges. Possible values can be overflow-y: visible | hidden | scroll | auto