HTML DOM overflow Property
 Complete Style Object Reference
Definition and Usage
The overflow property specifies what to do with content that
does not fit in an element box.
Syntax
Object.style.overflow=visible|hidden|scroll|auto
|
Possible Values
| Value |
Description |
| visible |
The content is not clipped and may be shown
outside the element box |
| hidden |
The content is clipped to match the element box
and will not be shown outside the element box |
| scroll |
The content is clipped to match the element box
and can be shown by using a scroll bar. Note: If this value is
used, a scroll bar will always be shown |
| auto |
The display is decided by the
browser. A scrollbar should be shown if needed |
Example
The following example uses the overflow property to hide the content overflow from an element box:
<html>
<head>
<style type="text/css">
div
{
border:thin solid green;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
function hideOverflow()
{
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.
</div>
<br />
<input type="button" onclick="hideOverflow()"
value="Hide overflow" />
</body>
</html>
|
Try-It-Yourself Demos
overflow - Hide content overflow
Complete Style Object Reference
Learn XML with <oXygen/> XML Editor - Free Trial!
 |
|
oXygen helps you learn to define,
edit, validate and transform XML documents. Supported technologies include XML Schema,
DTD, Relax NG, XSLT, XPath, XQuery, CSS.
Understand in no time how XSLT and XQuery work by using the intuitive oXygen debugger!
Do you have any XML related questions? Get free answers from the oXygen
XML forum
and from the video
demonstrations.
Download a FREE 30-day trial today!
|
|
