How to handle overflow in CSS?

CSS overflow property

It specifies the behaviour that occurs when the content of an elements overflows which means the content does not fit element’s box.

There might be situations when the content of an element is larger than the dimensions itself. To view that content completely, the browser might overlap the content with its adjacent content.

In order to view the content completely without overlapping with other content, CSS provides a property of overflow.

CSS overflow property allows you to specify whether the content is to clip, make it scroll or display overflow content of a block element.

The overflow property takes the following values

  • visible
  • hidden
  • scroll
  • auto

visible property in CSS

The visible property is the default property and it makes all the content to show out of the box with content overlapped with an adjacent content.

hidden property in CSS

The content that goes out of the element box will be clipped and the content within the element’s box will be invisible.

scroll property in CSS

The overflowing content is clipped and the content within the element’s box is shown with scrolling mechanism for the overflown content.

auto property in CSS

If content overflows the element’s box it will automatically provides the scrollbars to see the rest of the content, otherwise scrollbar will not appear.

Let us now understand overflow property with the help of code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        body{
            border:2px red solid;
            width:16%;
            padding:15px;
        }
        p#visible{
            overflow:visible;
            border: 1px black solid;  
            height:50px;
            width:250px;                  
        }
        p#hidden{
            overflow:hidden; 
            border: 1px black solid;
            height:50px;
            width:250px;                         
        }  
        p#scroll{
            overflow:scroll;  
            border: 1px black solid; 
            height:50px;
            width:250px;           
        }  
        p#auto{
            overflow:auto;
            border: 1px black solid;
            height:50px;
            width:250px;               
        }   
    </style>
</head>
<body>
    <div class="container">
        <h3>Visible overflow</h3>
        <p id="visible">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptate minima suscipit nesciunt, accusantium quaerat.
        </p>
        <h3>Hidden overflow</h3>
        <p id="hidden">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptate minima suscipit nesciunt, accusantium quaerat.
        </p>
        <h3>Scroll overflow</h3>
        <p id="scroll">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptate minima suscipit nesciunt, accusantium quaerat.
        </p>
        <h3>Auto overflow</h3>
        <p id="auto">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptate minima suscipit nesciunt, accusantium quaerat.
        </p>
    </div>   
</body>
</html>
CSS overflow property, www.programmingtutorial.in