Arrow

CSS Overflow

AuthorHariom Prajapati

Pubish Date11 Sep 2022

categoryCSS

It is used when content overflow from an element box.

 

Syntax - 

overflow: value ;

 

values

visible

This is default value which always visible the content if content overflow the box.

hidden

It hide all the content which is outside the element box.
scroll
It scroll all the content vertically or horizotally which out side the element box
auto If content is going out side the box then then it automatically scroll the content otherwize no scrolling there.
normal It is normal text.

 

For example -

<!DOCTYPE html>
<html>

<head>
    <title>CSS Overflow</title>
    <link rel="stylesheet" type="text/css" href="E:/style.css">

    <style>
        body{
            display: flex;
            justify-content: space-between;
        }
        .visible {
            background-color: lightblue;
            width: 110px;
            height: 110px;
            overflow: visible;
        }
        .hidden {
            background-color: lightblue;
            width: 110px;
            height: 110px;
            overflow: hidden;
        }
        .scroll {
            background-color: lightblue;
            width: 110px;
            height: 110px;
            overflow: scroll;
        }
        .auto {
            background-color: lightblue;
            width: 110px;
            height: 110px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <p class="visible">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><br>
    <p class="hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><br>
    <p class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><br>
    <p class="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>

</html>

 

Output

Over Flow