CSS HTML Javascript jQuery Ajax PHP Example Java MORE

CSS overflow

CSS overflow property is used to manage the content that too big or not fit to specific area. CSS Overflow

The overflow property has the following values:

visible - It specifies that overflow is not clipped. it renders outside the element's box.this is a default value.

hidden - It specifies that the overflow is clipped, and rest of the content will be invisible.

scroll - It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.

auto - It is similar to scroll but it add scroll when it needed.

inherit - It inherits the property from its parent element.

initial- It is used to set the property to its initial value.

Overflow visible

It specifies that overflow is not clipped. it renders outside the element's box.this is a default value.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: palegreen;
  color:black;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: visible;
}
</style>
</head>
<body>

<h2>CSS Overflow Visible</h2>


<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
It specifies that overflow is not clipped. it renders outside the element's box.this is a default value.
</div>

</body>
</html>

Run it yourself

Overflow Hidden

It specifies that the overflow is clipped, and rest of the content will be invisible.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: palegreen;
  color:black;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>CSS Overflow Hidden</h2>

<P>It specifies that the overflow is clipped, and rest of the content will be invisible.</p>

<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
CSS overflow property is used to manage the content that too big or not fit to specific area.
</div>

</body>
</html>

Run it yourself

Overflow Scroll

It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: palegreen;
  color:black;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: Scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow Scroll</h2>

<P>It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.</p>

<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
CSS overflow property is used to manage the content that too big or not fit to specific area.
</div>

</body>
</html>
 

Run it yourself

Overflow auto

It is similar to scroll but it added scroll when it needed.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: palegreen;
  color:black;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: auto;
}
</style>
</head>
<body>

<h2>CSS Overflow Auto</h2>

<P>It is similar to scroll but it added scroll when it needed.</p>

<div>CSS overflow property is used to manage the content that too big or not fit to specific area.
CSS overflow property is used to manage the content that too big or not fit to specific area.
</div>

</body>
</html>

Run it yourself