totn CSS

CSS: overflow-x property

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

Description

The CSS overflow-x property defines what to do when content overflows the content box horizontally (ie: left and right), such as displaying the content outside of the content box, clipping the content, or displaying a horizontal scroll bar.

Syntax

The syntax for the overflow-x CSS property is:

overflow-x: value;

Parameters or Arguments

value

The behavior to apply when content overflows the content box horizontally. 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-x: visible; }
hidden Content is clipped, the overflow content is hidden, and no horizontal scroll bar is displayed
div { overflow-x: hidden; }
scroll Content is clipped and the horizontal scroll bar is displayed
div { overflow-x: scroll; }
auto Browser determines what to do with the overflow content, which can vary from browser to browser (but generally results in the horizontal scroll bar being displayed as required)
div { overflow-x: auto; }
inherit Element will inherit the overflow from its parent element
div { overflow-x: inherit; }

Note

  • The overflow-x property applies to block, inline-block and table cells.
  • The overflow-x property does not handle vertical overflow. To handle vertical overflow, see the overflow and overflow-y properties.

Browser Compatibility

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

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

Example

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

Visible

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

The CSS would look like this:

div { background: lightyellow; border: 3px solid red; width: 80px; overflow-x: visible; }

The HTML would look like this:

<div>
  <p>This is a paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS overflow-x example, we have set the overflow-x to visible which means that when the content overflows the content box horizontally (ie: left to right), it is not clipped but will display outside of the content box.

Hidden

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

The CSS would look like this:

div { background: lightyellow; border: 3px solid red; width: 80px; overflow-x: hidden; }

The HTML would look like this:

<div>
  <p>This is a paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS overflow-x example, we have set the overflow-x property to hidden so when the content overflows the content box horizontally (ie: left to right), it is hidden and no scroll bars are displayed.

Scroll

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

The CSS would look like this:

div { background: lightyellow; border: 3px solid red; width: 80px; overflow-x: scroll; }

The HTML would look like this:

<div>
  <p>This is a paragraph written by techonthenet.com.</p>
</div>

The result would look like this:

CSS

In this CSS overflow-x example, we have set the overflow-x property to scroll so when the content overflows the content box horizontally (ie: left to right), it is clipped and the horizontal scroll bar is displayed.

Share on: