Overflow in CSS with example -

The overflow property of CSS has the following parameter or values.

<!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 paragrraph that does not fit inside your div.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 paragrraph that does not fit inside your div.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 paragrraph that does not fit inside your div.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 paragrraph that does not fit inside your div.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 paragrraph that does not fit inside your div.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 paragrraph that does not fit inside your div.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 paragrraph that does not fit inside your div.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 paragrraph that does not fit inside your div.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 paragrraph that does not fit inside your div.This is very long paragrraph that does not fit inside your div.This is very long paragrraph that does not fit inside your div.
</div>
</div>
</body>
</html>
<style> #testoverflow { background: blue; color: white; width: 50%; height: 100px; overflow: hidden; border: 1px solid #ccc; } </style>
<style> #testoverflow { background: blue; color: white; width: 50%; height: 100px; overflow: scroll; border: 1px solid #ccc; } </style>
<style> #testoverflow { background: blue; color: white; width: 50%; height: 100px; overflow: auto; border: 1px solid #ccc; } </style>

--

--

--

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bipsmedium

Bipsmedium

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.

More from Medium

Essential CSS Tutorial — Forms

Intern-Theory…

6 Best Online HTML Editor and Viewer for Web Development

How To Create HTML Elements Using Objects In An Javascript Array