clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS Overflow

Imperial Advance Hero Image

CSS Overflow

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

CSS