CSS text-overflow Property

The CSS text-overflow property specifies how the overflowing inline text should be signaled to the user. It is one of the CSS3 properties.

The text-overflow property works if the overflow property is set to "hidden", and white-space is set to "nowrap".

In CSS3, the specification allows using a custom string. White space, which is considered a string or any other custom string can be used. In the old version of the specification, it was noted that we could use an URL to an image for the ellipsis, but it was dropped.

Initial Value clip
Applies to Block container elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.textOverflow = "ellipsis";

Syntax

text-overflow: clip | ellipsis | string | initial | inherit;

Example of the text-overflow property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Text-overflow property example</h2>
    <h3>text-overflow: ellipsis</h3>
    <div>Lorem Ipsum</div>
  </body>
</html>

Result

CSS text-overflow with clip, ellipsis values

Example of the text-overflow property with the "clip", "ellipsis" and "initial" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.element1 {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: clip;
        border: 1px solid #666;
      }
      div.element2 {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #666;
      }
      div.element3 {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: initial;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Text-overflow property example</h2>
    <h3>text-overflow: clip</h3>
    <div class="element1">Lorem Ipsum</div>
    <h3>text-overflow: ellipsis</h3>
    <div class="element2">Lorem Ipsum</div>
    <h3>text-overflow: initial</h3>
    <div class="element3">Lorem Ipsum</div>
  </body>
</html>

Values

Value Description Play it
clip Cuts the text at the limit of the content area, the truncation can happen in the middle of a character. This is the default value of this property. Play it »
ellipsis Renders an ellipsis ("...") to show the clipped text. Play it »
<string> Renders the given string to represent the clipped text. The string is displayed inside the content area. Play it »
initial Makes the property use its default value. Play it »
inherit Inherits the property from its parents element.

Browser support

chrome edge firefox safari opera
4.0+ 12.0+ 7.0+ 3.1+ 11.5+
10.1 -o-

Practice Your Knowledge

The text-overflow property works if

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?