CSS Property overflow

overflow defines what to do during overflow.

Summary

Item	Value
Initial value	visible
Inherited	No.
Version	CSS2
JavaScript syntax	object.style.overflow="scroll"
Applies to	Block-level and replaced elements.

CSS Syntax

overflow:  auto | hidden | scroll | visible | inherit

Property Values

The property values are listed in the following table.

Value	Description
visible	Default value. The overflow is visible and not clipped.
hidden	Clip the overflow and hide the overflowed content
scroll	Clip the overflow and add scroll-bar to make the overflowed content visible
auto	Clip the overflow and add scroll-bar to make the overflowed content visible
inherit	Inherit the overflow property from the parent element

Browser compatibility


`overflow`	Yes	Yes	Yes	Yes	Yes

Example

An example showing how to use overflow CSS property.

<!DOCTYPE HTML>
<html>
     <head>
         <style>
  p {<!--  www.ja va  2s  . c o m-->
      padding: 10px;
      margin: 10px;
      border: thin solid black;
      width: 150px;
      height: 150px;
      overflow: auto;
  }
         </style>
     </head>
     <body>
         <p>
    P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
    P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
    P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
    P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
         </p>
     </body>
</html>

Click to view the demo

Example 2

The following HTML document uses the default value to handle overflow.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        p { <!--from  w  w  w.j ava2  s .c  o  m-->
            width: 200px; 
            height: 100px; 
            border: medium double black; 
        } 
        </style> 
    </head> 
    <body> 
<p> 
    HyperText Markup Language (HTML) is the main markup language for 
    displaying web pages and other information that can be displayed 
    in a web browser(From From Wikipedia, the free encyclopedia).

    HyperText Markup Language (HTML) is the main markup language for 
    displaying web pages and other information that can be displayed 
    in a web browser(From From Wikipedia, the free encyclopedia).

    HyperText Markup Language (HTML) is the main markup language for 
    displaying web pages and other information that can be displayed 
    in a web browser(From From Wikipedia, the free encyclopedia).
</p> 
    </body> 
</html>

Click to view the demo

Example 3

The following HTML code uses two different settings for overflow checking.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        p { <!--   w w  w  .  ja  v a  2 s .co m-->
            width: 200px; 
            height: 100px; 
            border: medium double black; 
        } 
        #first {overflow: hidden;} 
        #second { overflow: scroll;} 
        </style> 
    </head> 
    <body> 
<p id="first"> 
    HyperText Markup Language (HTML) is the main markup language for 
    displaying web pages and other information that can be displayed 
    in a web browser(From From Wikipedia, the free encyclopedia).
</p> 
<p id="second"> 
    HyperText Markup Language (HTML) is the main markup language for 
    displaying web pages and other information that can be displayed 
    in a web browser(From From Wikipedia, the free encyclopedia).
</p> 
    </body> 
</html>

Click to view the demo