text truncation using css

Ever wondered how to truncate text using only css with no javascript and apply ellipsis (...) at the end of the text.

Here is the solution.

.ellipse{
    width:240px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

Explanation

white-space property controls the spaces between words. If the value is set to no wrap, it forces the text to be rendered in a single line.

text-overflow property defines the behaviour of text when it overflows its container. The default behaviour os tp clip the text. The value "ellipsis" renders "..." to show the clipped text.

Fixed width and overflow hidden is applied to force the text to be clipped.

More Information

• White space
• Text Overflow