Truncate Text (Ellipsis)

Cut off text with ... when it overflows

Text

Live preview

This is a long text that will be truncated with an ellipsis when it overflows the container width.

CSS

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Browser support

All browsers. text-overflow: ellipsis since IE6.

Related tools

CSS Gradient Generator Box Shadow Generator CSS Property Explorer

Other CSS examples

Soft Box Shadow Elevated Box Shadow Neon Glow Shadow Blue to Purple Gradient Sunset Gradient Ocean Gradient Emerald Gradient Glassmorphism Neumorphism Text Gradient Smooth Scroll Center with Position Center with Flexbox Center with Grid