HTML CSS examples for CSS Property:overflow-x
The overflow-x CSS property sets whether to clip content, display scroll bars or display overflow content when content overflows at the left and right edges of the element's content area.
The following table summarizes the overflow-x Property.
Item | Value |
---|---|
Default value: | visible |
Applies to: | Block, inline-block and flex containers |
Inherited: | No |
Animatable: | No. |
The syntax of the property is as follows:
overflow-x: visible | hidden | scroll | auto | initial | inherit
The following table describes the values of this property.
Value | Description |
---|---|
visible | Content is not clipped, and may overlap other content. This is default value. |
hidden | Content that overflows the element's box is clipped and the rest of the content will be invisible. |
scroll | The overflowing content is clipped, but provides a scrolling mechanism to access the overflowed content. |
auto | If content overflows the element's box it provides scrollbars to see the rest of the content. |
initial | Sets this property to its default value. |
inherit | take the value of its parent element overflow-x property. |
The example below shows the overflow-x property.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS overflow-x property</title> <style type="text/css"> div {<!--from w w w. j a v a 2s. c o m--> width: 250px; height: 150px; border: 1px solid #cccccc; } div.scroll { overflow-x: scroll; } div.hidden { overflow-x: hidden; } p { width: 350px; } </style> </head> <body> <h1>Play with the size of div boxes to see how it works</h1> <h2>overflow-x:scroll</h2> <div class="scroll"> <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p> </div> <h2>overflow-x:hidden</h2> <div class="hidden"> <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p> </div> </body> </html>