Overflow:hidden dots at the end

Question

Let's say I have a string "I like big butts and I cannot lie" and I cut it with overflow:hidden, so it displays something like this:

"I like big butts and I cann"

cutting off the text. Is it possible to display this like this:

"I like big butts and I cann..."

using CSS?

Thanks.

Answer 1

Yes, via the text-overflow property in CSS 3. Caveat: it is not universally supported yet in browsers.

Answer 2

There is a text-overflow: ellipsis; property you can use.

The ellipses will show up in IE but not Mozilla. You will still get a similar effect where the text is just "cut off" instead of having ellipses.