Style overflowProperty
Style Object
Definition and Usage
The overflow property sets or returns how to handle content that is rendered outside the element box.
Syntax
Set the overflow property:
Object.style.overflow="visible|hidden|scroll|auto|inherit"
Return the overflow property:
Object.style.overflow
| Value | Description |
|---|---|
| visible | Default. Content will not be clipped, and it will be displayed outside the element box. |
| hidden | Content will be clipped, content outside the element box will not be displayed, and the browser will not show a scrollbar. |
| scroll | The browser will show a scrollbar, and content will be clipped if necessary. |
| auto | Content will be clipped, and a scrollbar will be displayed if needed. |
| inherit | The value of the overflow property is inherited from the parent element. |
Browser Support
All major browsers support the overflow property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if a !DOCTYPE is specified. IE9 supports "inherit".
Tips and Notes
Tip:If you want to hide the scrollbar of the entire document, use the overflow property on the body or html element.
Examples
Examples
Use the overflow property to hide overflowing content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example (example.com)</title>
<style type="text/css">
div{
border:1px solid red;
width:100px;
height:100px;
}
</style>
<script>
function displayResult(){
document.getElementById("div1").style.overflow="hidden";
}
</script>
</head>
<body>
<div id="div1">
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</div>
<br>
<input type="button" onclick="displayResult()" value="Hide overflow">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example (example.com)</title>
<style type="text/css">
div{
border:1px solid red;
width:100px;
height:100px;
}
</style>
<script>
function displayResult(){
document.getElementById("div1").style.overflow="hidden";
}
</script>
</head>
<body>
<div id="div1">
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</div>
<br>
<input type="button" onclick="displayResult()" value="Hide overflow">
</body>
</html>
Try it yourself »
Style Object Other Extensions