CSS overflow Property

Normally, if you write some text in a div or any element, then the dimensions of that element expands depending upon the area covered by the text so as to accomodate it. But as soon as you give a constraint to the width or height of the element, a scroll bar appears if its content cannot fit inside it. The vertical scroll bar that you see in this page is because the page content is exceeding the window height.

This is the case of default scrollbars. You can control the way an element's content behaves when it overflows the element's box using CSS overflow property.

Overflow Values

visible : This is the default value. It renders the content outside the element's box i.e. it does not force the content inside the box.

hidden : Overflowing content is hidden.

scroll : Adds scroll bars and hides overflowing content which can be seen using the scroll bars.

auto : Adds scroll bars if necessary.

initial : Sets the default value.

inherit : Sets the value as that of its parent element.

Now let's see how each of these values affect your content.

visible

overflow: visible lets the content overflow if it exceeds its container's dimensions. The overflowing content does not affect the normal layout.

auto

This is similar to scroll, but only adds a scrollbar when needed. overflow: autoadded vertical scroll bar to the first box whose content is exceeding its height, whereas no scroll bar is added in the second case in the following demo.

You can also manipulate the way overflowing content behaves in the horizontal and vertical directions separately using two other properties which are explained below.

overflow-x and overflow-y

overflow-x and overflow-y properties controls the way overflowing content appears in horizontal and vertical direction respectively. These can be given all the six values mentioned above.

Let's see an example for both.

HTML

<divid="box"><divid="inner_box"></div></div>

If the width of the outer box is 200px and that of the inner box is 250px, then giving overflow-x: auto to the outer box will add a horizontal scroll bar to it because the width of its content exceed its own.

Breaking long text

Suppose a single word is exceeding the width of the container, and you want neither to hide the overflowing text nor any scrollbar. In that case, you can break the word and force it to wrap onto a new line using the word-wrap property by simply giving its value break-word.