textOverflow Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:textOverflow

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

Description

The textOverflow property sets what to do for overflowed text.

Property Values

ValueDescription
clip Default value. Clips the text
ellipsis Use an ellipsis ("...") to represent clipped text
string Use the given string to represent clipped text
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

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

Change the textOverflow property:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/* w  w  w .j ava 2  s.c o  m*/
    border: 1px solid black;
    background-color: lightblue;
    width: 175px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: visible;
}
</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.textOverflow = "ellipsis";
}
</script>

</body>
</html>

Related Tutorials