What is CSS overflow property?

As the property name suggests, the overflow CSS property is used to directs what to do if the content is more than the element it contains?

For example, if you have text in a paragraph with the specified height and width. How do you want to display the text if the text is more than the paragraph box? Should additional text be hidden or all text should be displayed beyond the boundary of the paragraph?

Similarly, you may want to show the scrollbars in that paragraph element to manage all text within the boundary of that paragraph.

All this can be managed by using the CSS overflow property with its specific value.

Syntax of using overflow property

overflow: hidden;

You may use the following values in overflow property:

• auto
• visible (default)
• hidden
• scroll
• initial

Each of these value examples is shown below.

An example with overflow with the hidden value

Let us start with a neat example by not allowing the text to overflow the containing element. For that, we have a paragraph with a few CSS properties like height, width etc. along with overflow property.

See online demo and code

You can see, the remaining text that can’t be covered by the container element is hidden as we set the overflow: hidden; property.

The example with visible value

Now have a look at the output as we set the overflow: visible; You may spot the difference easily as compared with the above output:

See online demo and code

The text goes beyond the boundary of the paragraph.

Show/Hide scrollbars example

In this example, we will assign the ‘scroll’ value for the overflow property. See the code and output:

See online demo and code

An example of overflow-x property

CSS provides two more properties to give you control for the content greater than containing elements.

These properties are:

• overflow-x
• overflow-y

The overflow-x property enables you to deal with the content if it overflows at the left and right edges of the block element. So, you may specify whether to show scroll bar, clip the content by using hidden value or overflow the content beyond the boundary of element.

Similarly, you may deal with the content by overflow-y property if content overflows top and bottom edges of the block element.

First, have a look at an example of overflow-x

See online demo and code