Sometimes the content shown is too large to be visible in a single line or division of the website. So, to avoid loss of that information we can use overflow property.
Overflow Visible
This makes the whole text visible irrespective of the container size.
overflow: visible;
Overflow Hidden
It hides the content that doesn’t fit the box.
overflow: hidden;
Overflow Scroll
It adds an automatic scroller in the container so for the seeing the content it can be scrolled without affecting the container dimensions.
overflow: scroll;
Overflow Auto
It is quite similar to scroll but the scroller is only added when the content starts getting out of the container. Mostly this option is used to avoid unnecessary scroll bars if the content already is within the content dimensions.
overflow: auto;
Example:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Overflow property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS Overflow</h1>
<div class="container">
<div class="visible">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex cum quo et voluptas inventore quas dolore, natus
dignissimos? Omnis ab error placeat possimus id iste soluta asperiores consectetur nam exercitationem?
</div>
<h1>CSS Visible</h1>
<hr>
<div class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex cum quo et voluptas inventore quas dolore, natus
dignissimos? Omnis ab error placeat possimus id iste soluta asperiores consectetur nam exercitationem?
</div>
<h1>CSS hidden</h1>
<hr>
<div class="scroll">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex cum quo et voluptas inventore quas dolore, natus
dignissimos? Omnis ab error placeat possimus id iste soluta asperiores consectetur nam exercitationem?
</div>
<h1>CSS Scroll</h1>
<hr>
<div class="auto">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex cum quo et voluptas inventore quas dolore, natus
dignissimos? Omnis ab error placeat possimus id iste soluta asperiores consectetur nam exercitationem?
</div>
<h1>CSS auto </h1>
</div>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
h1 {
text-shadow: 2px 2px 4px red;
margin-bottom: 30px;
text-align: center;
}
.container {
display: flex;
flex-direction: row;
width: 100%;
height: 300px;
border: 2px solid green;
}
.visible {
width: 300px;
height: 60px;
border: 2px solid red;
overflow: visible;
padding: 20px 10px;
margin-right: 40px;
}
.hidden {
width: 300px;
height: 60px;
border: 2px solid red;
overflow: hidden;
padding: 20px 30px;
}
.scroll {
width: 300px;
height: 150px;
border: 2px solid red;
overflow: scroll;
padding: 20px 30px;
}
.auto {
width: 300px;
height: 150px;
border: 2px solid red;
overflow: auto;
padding: 20px 30px;
}
Output: you can find it at the top Image.
Do leave your comments