overflowX Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:overflowX

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. overflowX

Description

The overflowX property sets what to do with the left/right edges of the overflowed content.

Property Values

Property Values

Value Description
visible Content is not clipped, and may overlap other content. This is default value.
hidden Content that overflows the element's box is clipped and the rest of the content will be invisible.
scroll The overflowing content is clipped, but provides a scrolling mechanism to access the overflowed content.
autoIf content overflows the element's box it provides scrollbars to see the rest of the content.
initial Sets this property to its default value.
inherit take the value of its parent element overflow property.

Technical Details

Item Value
Default Value: visible
Return Value: A String, representing the overflow-x property of an element
CSS VersionCSS3

Scroll horizontally if the text overflows the element's content area:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from  w  w  w . jav  a2 s.co  m*/
    border: 1px solid black;
    background-color: lightblue;
    width: 200px;
    height: 210px;
    white-space: nowrap;
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,<br> sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br> Ut wisi enim ad minim veniam,<br> quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.overflowX = "scroll";
}
</script>

</body>
</html>

Related Tutorials