Search within TutorialsPark

CSS overflow Property


To shorthand to set multiple overflow properties in a single declaration


Definition and Notes.

1. The CSS overflow property is used to specify what happens to content that overflows the content area of an element.

2.If two values are specified, the first values specifies the x-overflow, while the second specifies the y-overflow, a single value defines both.


Syntax:

CSS overflow property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note-For the value of scroll, the scroll bars would appear even when the content fits the elements box

Property Values

Value Description
visible The overflowing content spills out of the box and is displayed. Its the default value.
hidden The overflowing content is clipped and the user cannot see the hidden(i.e clipped) content..
scroll The browser creates a scroll bar for the user to see the overflowing content. The scroll bar is visible even when the content does not overflow.
auto Leaves it for the browser to apply scroll bars as and when required. It applies scroll bars when the content overflows or else doesn't.

Specifications

Specs Value
Name overflow
Value [visible | hidden | scroll | auto | no-display | no-content |]{1, 2}
Initial Value visible
Applies to Nonreplaced elements with a display value of block or inline-block
Javascript syntax object.style.overflow="hidden"
Inherited No
Computed Value Same as declared Value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.