没有"white-space:nowrap"的文本溢出省略号？

Question

我想知道是否有任何聪明的方法,以实现css 省略号效果,而无需申请white-space: nowrap.

换句话说,假设我们有一个特定高度的块元素,我们想让它充满文本内容,但是一旦水平加上垂直方向没有空间,就应该应用省略号..

快速示例:http://jsfiddle.net/fpv9n/2/

文本应该像它一样,但最后也有省略号.有没有办法用CSS实现？我也会考虑JS解决方案.

Answer 1

使用纯CSS无法做到这一点.这是可怕的和悲伤的.当你希望浏览器"溢出"多行文本时,我常常想要这个,当文本溢出容器时可能会溢出文本.

Answer 2

您可以使用内容伪造省略号:'...'和position:absolute; 在一行数内设置高度(最后添加垂直填充)
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
}