CSS Properties/Box Styles/controls what happens to the overflowed content

overflow: ***;

Browser

The overflow property controls what happens to the overflowed content.

div {
width: 200px;
height: 100px;
overflow: scroll;
}

Property	Value	Explanation
overflow	visible	the overflowed content is not clipped (default) (it is displayed outside the element)
	hidden	the overflowed content is clipped (it is not displayed)
	scroll	the overflowed content is clipped (it is displayed by the scrolling)
	auto	if the content overflows, the scrollbar is displayed

Screen shots of examples

#example {
width: 150px;
height: 85px;
border: 1px #c0c0c0 solid;
background-color: #f9f9f9;
overflow: ***;
}

<div id="example">
The overflow property example. some text some text ...
</div>

*In Quirks mode*
Value	MSIE 7	Firefox 1	Opera 9
visible
hidden
scroll
auto

*In Standards mode*
Value	MSIE 7	Firefox 1	Opera 9
visible
hidden
scroll
auto

DOCTYPE Declaration

Example

<html>
<head>
<title>TAG index</title>

<style type="text/css">

div {
width: 70%;
height: 200px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px gray solid;
}

#example1 { overflow: auto; }
#example2 { overflow: hidden; }

</style>

</head>
<body>

<div id="example1">
<p>If the content overflows, the scrollbar is displayed.</p>
<p>Scroll</p>
...
</div>

<div id="example2">
<p>The overflowed content is clipped. (It is not displayed)</p>
<p>Scroll</p>
...
</div>

</body>
</html>

CSS Properties

controls what happens to the overflowed content

overflow: ***;

Example

Output

Related Document