CSS - Max Width and Ellipses

Question

I have a span that will contain text. I would like the span to expand to a maximum of 500px to accommodate the text inside. After the max is reached I would like the text to display ellipses for any text overflowing the max-width. Is this possible? I tried the following, but this did not do the trick.

Thanks

{
    position: absolute;
    top: 13px;
    left: 44px;
    max-width: 500px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

Answer 1

This article might help you, well at least in getting it simulated in FF: http://www.jide.fr/english/emulate-text-overflowellipsis-in-firefox-with-css

Answer 2

This javascript will truncate your text and add an ellipsis. (Without breaking it in the middle of a word or markup)

Barelyfitz Truncate js.

Not sure on the browser compatibility of i, but it should work :)

Hope it helps.

Answer 3

Spans are display:inline by default, which can cause odd behavior when dimensions are assigned to it. If it's being positioned absolutely anyway, you should use a div or set the span to display:block instead.

I'm not sure if this will fix your problem, but it's a start :)

Answer 4

This is an interesting article about getting ellipsis to work on all modern browsers without using javascript.