What is text-overflow? http://www.css3.info/preview/text-overflow/

How to implement it nowadays for the most popular browsers?

Here is a solution:

style.css

    .wrapper span
    {
        display:block;
        overflow:hidden;
        white-space:nowrap;
        width:100%;
        -moz-binding:url("ellipsisxul.xml#ellipsis");
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
    }

ellipsisxul.xml

    <?xml version="1.0"?>
    <bindings xmlns="www.mozilla.org/xbl" xmlns:xbl="www.mozilla.org/xbl" xmlns:xul="www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
        <binding id="ellipsis">
            <content>
                <xul:window>
                    <xul:description crop="end" xbl:inherits="value=xbl:text">
                        <children/>
                    </xul:description>
                </xul:window>
            </content>
     
        </binding>
    </bindings>