Javascript Reference - HTML DOM Style textOverflow Property

The textOverflow property gets and sets text-overflow CSS property.

Browser Support


`textOverflow`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the textOverflow property:

var v = object.style.textOverflow

Set the textOverflow property:

object.style.textOverflow='clip|ellipsis|string|initial|inherit'

Property Values

Value	Description
clip	Default value. Clip the text
ellipsis	Add an ellipsis (...) to represent clipped text
string	Use the given string to represent clipped text
initial	Se to default value.
inherit	Inherit from parent element

Technical Details

Default Value:	clip
Return Value:	A string representing the text-overflow property
CSS Version	CSS3

Example

The following code shows how to change the textOverflow property.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--   w  w  w  .  jav  a 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">
this is a test. <br/>this is a test. <br/>this is a test. <br/>this is a test. <br/>
this is a test. <br/>this is a test. <br/>this is a test. <br/>this is a test. <br/>
this is a test. <br/>this is a test. <br/>this is a test. <br/>this is a test. <br/>
this is a test. <br/>this is a test. <br/>this is a test. <br/>this is a test. <br/>
this is a test. <br/>this is a test. <br/>this is a test. <br/>this is a test. <br/>
</div>

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

</body>
</html>

The code above is rendered as follows: