[解決済み] text-overflow: 省略記号が機能しない

質問

私が試したのはこれです( ここで ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

本来は、ウィンドウを小さくしたときに、spanをellipisで縮小したいのですが。何がいけなかったのでしょうか？

どうすればいいですか？

CSSが必要です。 overflow , width (または max-width ), display および 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>

追記 ラインクランプ（Multiline Overflow Ellipses）を行うためのテクニックの概要を知りたい場合は、このCSS-Tricksのページを見てください。 https://css-tricks.com/line-clampin/

追記2 (2019年5月)
このように リンク は、Firefox 68 でサポートされると主張しています。 -webkit-line-clamp (!)