CSS Overflow, TutorialsPoint, CSS Overflow Tutorial

CSS Overflow

CSS overflow property allowing you to specify whether to clip content, render scroll bars or display overflow content of a block-level element.

This property can take one of the following values: visible (default), hidden, scroll, and auto. CSS3 also defines the overflow-x and overflow-y properties which allow for independent control of the vertical and horizontal clipping.

Overflow Scroll

<!DOCTYPE html>
<html lang="en">
<head>
<title>Overflow - Scroll</title>
<style type="text/css">
    .box_overflow{ overflow:scroll; width:280px; height:100px; padding:10px; border:1px solid #0099da;}
</style>
</head>

<body>

<div class="box_overflow">

<h4>Overflow - Scroll</h4>
<p>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. 
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>
<p>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. 
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>

</div>

</body>
</html>

Output :

Overflow - 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. 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.

Overflow Hidden

<!DOCTYPE html>
<html lang="en">
<head>
<title>Overflow - Hidden</title>
<style type="text/css">
    .box_overflow{ overflow:hidden; width:280px; height:100px; padding:10px; border:1px solid #0099da;}
</style>
</head>

<body>

<div class="box_overflow">

<h4>Overflow - Hidden</h4>
<p>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. 
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>
<p>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. 
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>

</div>

</body>
</html>

Output :

Overflow - Hidden

overflow-x:scroll;

<!DOCTYPE html>
<html lang="en">
<head>
<title>Overflow-X - Scroll</title>
<style type="text/css">
    .box_overflow{ overflow-x:scroll; width:280px; height:100px; padding:10px; border:1px solid #0099da;}
</style>
</head>

<body>

<div class="box_overflow">

<h4>Overflow - Overflow-x</h4>
<p>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. 
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>
<p>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. 
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>
</div>
</body>
</html>

Output :

Overflow - Overflow-x

overflow-y:scroll;

<!DOCTYPE html>
<html lang="en">
<head>
<title>Overflow-Y - Scroll</title>
<style type="text/css">
    .box_overflow{ overflow-y:scroll; width:280px; height:100px; padding:10px; border:1px solid #0099da;}
</style>
</head>

<body>

<div class="box_overflow">

<h4>Overflow - Overflow-y</h4>
<p>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. 
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>
<p>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. 
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>
</div>
</body>
</html>

Output :

Overflow - Overflow-y

CSS Tutorial