totn CSS

CSS: overflow property

This CSS tutorial explains how to use the CSS property called overflow with syntax and examples.

Description

The CSS overflow property defines what to do when content overflows the content box, such as displaying the content outside of the content box, clipping the content, or displaying scroll bars.

Syntax

The syntax for the overflow CSS property is:

overflow: value;

Parameters or Arguments

value

The behavior to apply when content overflows the content box. It can be one of the following:

Value Description
visible Content is not clipped, but is displayed outside of the content box (this is the default behavior)
div { overflow: visible; }
hidden Content is clipped, the overflow content is hidden, and no scroll bars are displayed
div { overflow: hidden; }
scroll Content is clipped and the necessary scroll bars are displayed
div { overflow: scroll; }
auto Browser determines what to do with the overflow content, which can vary from browser to browser (but generally results in scroll bars being displayed as required)
div { overflow: auto; }
inherit Element will inherit the overflow from its parent element
div { overflow: inherit; }

Note

  • The overflow property applies to block, inline-block and table cells.

Browser Compatibility

The CSS overflow property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

Example

We will discuss the overflow property below, exploring examples of how to use this property in CSS.

Visible

Let's look at an example where we set the overflow to visible.

The CSS would look like this:

div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow: visible; }

The HTML would look like this:

<div>
  <p>This is the first paragraph written by techonthenet.com.</p>
  <p>This is the second paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS overflow example, we have set the overflow to visible which means that when the content overflows the content box, it is not clipped but will display outside of the content box.

Hidden

Now, let's take our same example and set the overflow to hidden.

The CSS would look like this:

div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow: hidden; }

The HTML would look like this:

<div>
  <p>This is the first paragraph written by techonthenet.com.</p>
  <p>This is the second paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS overflow example, we have set the overflow property to hidden so when the content overflows the content box, it is hidden and no scroll bars are displayed.

Scroll

Finally, let's take our example and set the overflow to scroll to see what happens.

The CSS would look like this:

div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow: scroll; }

The HTML would look like this:

<div>
  <p>This is the first paragraph written by techonthenet.com.</p>
  <p>This is the second paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS overflow example, we have set the overflow property to scroll so when the content overflows the content box, it is clipped and the necessary scroll bars are displayed. So in this example, the vertical scroll bar appears because the content is too tall for the content box.

Share on: