没有“white-space：nowrap”的文本溢出省略号？

Question

我想知道是否有任何聪明的方法来实现css 省略号效果而无需同时应用white-space: nowrap。

换句话说，假设我们有一个高度的块元素，我们想让它充满文本内容，但是省略号只要在水平 加 垂直指示中没有空间，就应该立即应用。

简单示例：http://jsfiddle.net/fpv9n/2/

文本应该是这样的，但最后还有省略号。有没有办法用CSS实现？我也会考虑JS解决方案。

Answer 1

使用纯CSS无法做到这一点。这是可怕的和悲伤的。当你希望浏览器“删除”多行文本时，我经常会想到这一点，当文本溢出容器时可能会溢出文本。

Answer 2

你可以用内容伪造省略号：'...'和位置：绝对; 在一行数内设置高度（最后添加垂直填充）
http://jsfiddle.net/V3ZQH/

span {
    background-color: red;
    width: 100px;
    /*height: 50px;*/
    height:2.4em;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap; */
    position:relative;
    padding:0 0.5em;
}
span:after {
    content:'...';
    background:inherit;
    position:absolute;
    bottom:0;
    right:0;
    box-shadow:0 0 5px red
}

Answer 3

我只知道涉及content的丑陋工作，绝对定位，持有点和填充的辅助元素。我认为最好让你的身高与你的行高完全相同，例如通过这样做：

height: 2em;
font-size: 1em;
line-height: 1em;