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:
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:
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:
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.
Advertisements