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

Introduction to Cascading Style Sheets

CSS Selectors

CSS color property

CSS Background Color

CSS Background Image

CSS Background Repeat

CSS Background Gradients

CSS Background Size

CSS Background Blend Mode

CSS Background Clip

CSS Background Attachment

CSS Background Position

CSS Background Origin

CSS Font Family

CSS Font Size

CSS Font Style

CSS Font Weight

CSS Font Variant

CSS Text Color

CSS Text Alignment

CSS Text Align Last

CSS Text Direction

CSS Vertical Align

CSS Text Decoration

CSS Text Decoration Line

CSS Text Decoration Color

CSS Text Decoration Style

CSS Text Decoration Thickness

CSS Text Transform

CSS White Space

CSS Overflow

CSS Overflow X

CSS Overflow Y

CSS Text Overflow

CSS Text Shadow

CSS Text Spacing

CSS Letter Spacing

CSS Word Spacing

CSS Line Height

CSS Text Indent

CSS Links

CSS Border

CSS Border Color

CSS Border Style

CSS Border Width

CSS Overflow