CSS text-overflow

The text-overflow property controls how hidden inline overflow is signaled. It is commonly used to show an ellipsis when a single line of text is clipped.

Syntax

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "...";

Example

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

Result:

This is a very long title that does not fit in the available space.

Required conditions

For the common single-line ellipsis pattern, the element needs constrained width, hidden overflow and no wrapping.

Compatibility note

Some experimental values, such as fade-style behavior, are not safe to present as universal. Use ellipsis or clip for reliable examples.