CSS - Overflow

First Page
Next Page

CSS Overflow

The CSS overflow controls the big content. It tells whether to clip content or to add scroll bars.

The CSS overflow property is used to handle the overflow of content. There are various properties of CSS overflow are given below in table.

CSS Overflow Properties

Note − The CSS overflow property works for the block elements with a specified height.

For Example
Value Description
visible If the overflow is not clipped. It renders outside the element’s box.
hidden If the overflow is clipped, and rest of the content will be invisible.
scroll If the overflow is clipped and a scroll bar is used to see the rest of the content.
auto If the overflow is clipped, a scroll bar is needed to see the rest of the content.
inherit It inherits the property from its parent element.
initial It is used to set the property of initial value.

Example

<!DOCTYPE>
<html>
   <head>
      <style>
         p {
         width:100px;
         height:85px;
         border:1px solid;
         overflow:visible;
         }
      </style>
   </head>
   <body>
      <h2>
         HTMLTPOINT
      </h2>
      <p>
         By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box.
      </p>
   </body>
</html>

Result

First Page
Next Page