How to truncate text using CSS only

CSSIntuit

Truncating text using CSS only

We can use the text-overflow property to truncate text. Giving it the value ellipsis will show an ellipsis when the text is truncated.

However, the text-overflow property doesn't force an overflow to occur. To make text overflow its container, you have to set other CSS properties: overflow and white-space.

Snippet

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

Example

You can resize the container using the resize property to see the truncation in action.

Table of Contents