获取空白无换行样式"..."延续

Question

我正在一段文本上成功地应用空白：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' );
} );

Answer 2

假设浏览器支持，它可能由于另一个看似无关的原因而不起作用
前提条件：您的文本内容位于样式为
的包含块内overflow:hidden、whitespace:nowrap和text-overflow:ellipsis
我的观察结果是，包含块的位置属性必须是"相对的"。省略号不会显示其是否绝对定位，文本只是被剪切。

答案就在这里绝对相对位置宽度&高度