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' );
} );

Answer 2

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

这里的答案指出了它 absolute vs relative position width & height

得到“...”延续白色空间nowrap风格

2 个答案: