overflow-x - HTML CSS CSS Property

HTML CSS examples for CSS Property:overflow-x

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. overflow-x

Description

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.

Syntax

The syntax of the property is as follows: 

overflow-x:      visible | hidden | scroll | auto | initial | inherit

Property Values

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.
autoIf 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.

Demo Code

ResultView the demo in separate window 

<!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>

Related Tutorials