text-overflow

The text-overflow property designates how content that is overflowed and not displayed should be signaled to the user, by clipping, showing an ellipsis (…), or displaying a custom string.

Syntax

Both white-space: nowrap and overflow: hidden are required for text-overflow.

p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Values

clip
Default value. Designates that the text is clipped and not accessible.

ellipsis
Appends an ellipsis (“…”) to represent the clipped text.

string
Designates a string to represent the clipped text.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of text-overflow? Submit a codepen.io demo and we'll showcase it here ↴