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 ...

score 12 · Answer 1 · answered Mar 31 '13 at 10:51

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.

score 9 · Accepted Answer · answered Mar 31 '13 at 10:41

9

Maybe you can try

text-overflow:ellipsis;

http://davidwalsh.name/css-ellipsis

answered Mar 31 '13 at 10:41

ChoiZ

747
5
22

1

Embrace simplicity :) +1 – Mar 31 '13 at 10:50
1

Need overflow: hidden too. Doesn't work by itself – DIG Aug 25 '15 at 20:39

Trim overflow text in css?

2 Answers2