CSS text-overflow

The CSS text-overflow property is used to define, how the hidden overflowed content, should appear to the user. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{width: 160px; white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis;}
   </style>
</head>
<body>
   
   <h2>The text-overflow Property</h2>
   <p>This is an example of text-overflow property in CSS.</p>
   
</body>
</html>

Output

The text-overflow Property

This is an example of text-overflow property in CSS.

In above example, because the width of p (paragraph) is set to 160px, then anything (text) wider than 160px, gets overflowed.

Note - We need to define the white-space with nowrap, and overflow with hidden, to make the text-overflow property to work.

CSS text-overflow Syntax

The syntax of text-overflow property in CSS, is:

text-overflow: x;

The value of x should be any of the following:

ellipsis - used to put ellipsis (...) for the clipped text
clip - used to clip the text. The overflowed text will not be displayed. This is the default value
string - used to provide custom string to clip the text, if not having enough space to display the defined string. It is similar to clip
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS text-overflow Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{width: 165px; white-space: nowrap; overflow: hidden; border: 2px solid coral;}
      .a p{text-overflow: ellipsis;}
      .b p{text-overflow: clip;}
      .c p{text-overflow: "-";}
   </style>
</head>
<body>
   
   <div class="a">
      <h2>text-overflow: ellipsis</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <div class="b">
      <h2>text-overflow: clip</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>

   <div class="c">
      <h2>text-overflow: "-"</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>
   
</body>
</html>

Output

text-overflow: ellipsis

Lorem ipsum dolor sit amet consectetur adipisicing elit.

text-overflow: clip

Lorem ipsum dolor sit amet consectetur adipisicing elit.

text-overflow: "-"

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Note - Most of the time, ellipsis is used to define the text-overflow property to signal the hidden overflowed content to the user.

CSS Online Test

« Previous Tutorial Next Tutorial »