css - 获取空白 nowrap 样式的 "..."延续

Question

我在一段文本上成功应用了 white-space: nowrap。我想知道如果文本被 nowrap 样式截断，是否有可能在文本末尾获得标准的“...”。这是 CSS 可以解决的问题吗？还是我需要 javascript？

谢谢。

Answer 1

Firefox(可能还有其他一些)支持:

text-overflow: ellipsis;

但无论如何它都不是跨浏览器的。为了获得跨浏览器的东西，您需要使用 javascript。我过去这样做的一种方法是:

<div class="text">
    text goes here
    <div class="ellipsis">...</div>
</div>

.text {
    position : relative;
}

.text .ellipsis {
    display : none;
}
.text.long .ellipsis {
    display    : block;
    position   : absolute;
    right      : 0px;
    background : #FFF;
}

那么你的 js 就是这样的(使用 jQuery):

$( '.text' ).each( function(){
    var $this = $( this );
    $this[ ( $this.width() > $this.outerWidth() ) ? 'addClass' : 'removeClass' ]
        ( 'long' );
} );