X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS text-overflow Property

The CSS text-overflow property specifies how the overflowing inline text should be signaled to the user.

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.

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

<!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>

An example which contains "clip", "ellipsis" and "initial" values:

Example

<!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
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.
ellipsis Renders an ellipsis ("...") to show the clipped text.
<string> Renders the given string to represent the clipped text. The string is displayed inside the content area.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Practice Your Knowledge

The text-overflow property works if



Do you find this helpful?

Related articles