HTML DOM Style textOverflow Property

The DOM style textOverflow property returns and apply what should happen when the text flow outside the element container in an HTML document.

Syntax

Following is the syntax −

Returning textOverflow

object.style.textOverflow

Modifying textOverflow

object.style.textOverflow = “value”

Values

Here, value can be −

Value	Explanation
inherit	It inherits this property value from its parent element.
initial	It set this property value to its default value.
clip	It clip the overflowing text.
ellipsis	It sets an ellipsis(“...”) to represent the clipped text of an element.
string	It sets the given string to represent the clipped text of an element.

Example

Let us see an example of style textOverflow property −

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   p {
      margin: 1.5rem auto;
      border: 3px solid #fff;
      width: 400px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: visible;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>DOM Style textOverflow Property Example</h1>
<p>
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change textOverflow</button>
<script>
   function add() {
      document.querySelector('p').style.textOverflow = "ellipsis";
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Style textOverflow Property

Click on “Change textOverflow” button to change the behaviour of the overflowing paragraph text. The ellipses gets added here −

HTML DOM Style textOverflow Property