Javascript DOM CSS Style textOverflow Property

Introduction

Change the textOverflow property:

document.getElementById("myDIV").style.textOverflow = "ellipsis";

Click the button to change the text-overflow property of the DIV element:

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from  www  .  j  a v  a  2s.com
  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>

The textOverflow property specifies what should happen when text overflows the containing element.

Property Values

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

The textOverflow property returns a String representing the text-overflow property of an element.

Previous Next