Member-only story
Overflow in CSS with example -
4 min readMay 28, 2022
Hi friends, in this tutorial you will learn overflow in CSS with its parameter or values. This is a very important property of CSS and is almost used in website designing. It is used to wrap the content within the limited space if the content is too large to put inside a div.
Also read, Image slider HTML with CSS and Javascript
The overflow property of CSS has the following parameter or values.
Below are the examples of the above properties one by one.
Visible:- Visible is used to wrap the content but it can not wrap the whole content. Some portions of the content go outside the div if the content size is larger than the specified div. This property only works for block elements. Suppose you have a div with aspecific height then it will work.
HTML code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#testoverflow
{
background: blue;
color: white;
width: 50%;
height: 100px;
overflow: visible;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container" style="width: 80%;">
<br><br>
<h3>Overflow Property in CSS</h3>
<p>Below paragraph will show you the effect of overflow property</p> <div id="testoverflow"> This is very long paragrraph that does not fit inside your div.This is very long paragrraph that does not fit inside your div.This is very long…
