Are there any trick to append ... by CSS ?

Question

Let see my problem

I have an element which its width = 50px

and I have my string to put in that element "This text is longer than 50px and will be display in two or more lines"

What I want to get in my element is the text with 50px width + ... like this :

This text is longer than 50px and will...

Are there any good or possible way to do this with CSS?

Answer 1

There is a CSS property for this, but it is not supported by Firefox:

text-overflow: ellipsis;

There are hacks to make it work in Firefox, but none are too pretty.

Some required reading:

• Ellipsis in all modern browsers
• Truncating long strings with CSS: feasible yet?