Trim overflow text in css?

Question

Is it possible to trim the ending of the text?

INPUT

this is an extremely very long text

RESULT

this is an ...

Solution 1

Maybe you can try

text-overflow:ellipsis;

http://davidwalsh.name/css-ellipsis

Solution 2

Yes, that is possible to achieve solely by CSS.

See my Example on jsFiddle

Key for achieving the effect is to use a combination of the following CSS-properties:

width: [x]px
overflow: hidden
white-space: nowrap
text-overflow: ellipsis

The width is neccessary to use overflow. Overflow is needed for text-overflow and white-space is needed to prevent breaks and to assure that the whole text is in one line.