CSS text-overflow Property

February 10, 2021 12:37 pm IST

You are Here:

CSS text-overflow Property

CSS text-overflow property sets how hidden overflow content is signaled to users.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 2px solid black; white-space: nowrap; overflow: hidden; padding: 2px; width: 50px; } #point{ text-overflow: clip; } #point1{ text-overflow: ellipsis; } </style> </head> <body> <h1>CSS text-overflow Property</h1> <h2>text-overflow: clip;</h2> <div id="point">This is a sentence.</div> <h2>text-overflow: ellipsis;</h2> <div id="point1">This is a sentence.</div> </body> </html>

Run

Syntax

Using CSS

element{ text-overflow: ellipsis; }

Using Javascript

object.style.textOverflow="ellipsis";

Animatable

No, text-overflow property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS text-overflow property is clip.

Property Value

The following table provides a list of values for CSS text-overflow property.

Value	Explanation
clip	Specifies that the text is clipped and not accessible.
ellipsis	Specifies that the ellipsis (...) is displayed inside the content area, decreasing the amount of text displayed.

Using JavaScript

In the following example, we will demonstrate how to change the CSS text-overflow property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 2px solid black; white-space: nowrap; overflow: hidden; padding: 2px; margin-bottom: 10px; width: 50px; } </style> </head> <body> <h1>CSS text-overflow Property</h1> <div>This is a sentence.</div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.textOverflow = "ellipsis"; } </script> </body> </html>

Run