CSS | Overflow - GeeksforGeeks

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

visible
hidden
scroll
auto

Visible: The content is not clipped and visible outside the element box.
Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         p { 
         width:100px; 
         height:80px; 
         border:1px solid; 
         overflow:visible; 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         The CSS overflow controls big content. 
         It tells whether to clip content or to add scroll bars. 
      </p> 
   </body> 
</html> 

Output:

Hidden: The overflow is clipped and the rest of the content is invisible.

Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         p { 
         width:100px; 
         height:80px; 
         border:1px solid; 
         overflow:hidden; 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         The CSS overflow controls big content. 
         It tells whether to clip content or to add scroll bars. 
      </p> 
   </body> 
</html> 

Output:

Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical.
Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         p { 
         width:120px; 
         height:100px; 
         border:1px solid; 
         overflow:scroll; 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         The CSS overflow controls big content. 
         It tells whether to clip content or to add scroll bars. 
      </p> 
   </body> 
</html> 

Output:

Auto: It automatically adds a scrollbar whenever it is required.

Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         p { 
         width:120px; 
         height:100px; 
         border:1px solid; 
         overflow:auto; 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         The CSS overflow controls big content. 
         It tells whether to clip content or to add scroll bars. 
      </p> 
   </body> 
</html> 

Output:

Overflow-x and Overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges.
Example:

<!DOCTYPE> 
<html> 
   <head> 
      <style> 
         p { 
         width:120px; 
         height:100px; 
         border:1px solid; 
         overflow-x:scroll; 
         overflow-y:hidden; 
         } 
      </style> 
   </head> 
   <body> 
      <h2> 
         GEEKSFORGEEKS 
      </h2> 
      <p> 
         The CSS overflow controls big content. 
         It tells whether to clip content or to add scroll bars. 
      </p> 
   </body> 
</html> 

Output:

My Personal Notes

Recommended Posts: