CSS text-overflow Property

❮ Prev Next ❯

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>

Try it Yourself »

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>

Try it Yourself »

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.