text-overflow: ellipsis not working

You need to have CSS overflow, width (or max-width), display, and white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

<span>Test test test test test test</span>

Addendum If you want an overview of techniques to do line clamping (Multiline Overflow Ellipses), look at this CSS-Tricks page: https://css-tricks.com/line-clampin/

Addendum2 (May 2019)
As this link claims, Firefox 68 will support -webkit-line-clamp (!)

Make sure you have a block element, a maximum size and set overflow to hidden. (Tested in IE9 and FF 7)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

For multi-lines in Chrome use :

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

Inspired from youtube ;-)