How to truncate text using CSS only

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

1.truncate-text {
2  overflow: hidden;
3  white-space: nowrap;
4  text-overflow: ellipsis;
5  width: 200px;
6}

Example

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