你需要有 CSS overflow, width(or 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(!)