Question

使用text-overflow: ellipsis，是否可以仅省略号

可点击
样式像超链接

若然，怎么样？

目标是当文本溢出时，省略号可用于显示溢出的文本，并且用户可以清楚地看到省略号是可点击的。

Answer 1

.truncate {
    width: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

并在div中使用此类作为锚标记：

<div class="truncate"><a href="http://www.facebook.com">Facebook</a></div>

演示：http://jsfiddle.net/WaAL5/

更新了解决方案 ：http://jsfiddle.net/WaAL5/1/

Answer 2

如果你不介意使用JQuery，你可以做这样的事情 -

<div class="truncate"><a href="Javascipt:">Some Link</a></div>

$(".truncate a").each( function() {
    $this = $(this);
    var linkWidth = $this.width();
    var contWidth = $this.parent().width();

    if (linkWidth >= contWidth) {
        var linkDesc = $this.text();
        $this.text('\u2026').addClass('ellipsis');
        $this.parent().prepend(linkDesc);    
    }    
});

.truncate {
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}
.truncate a.ellipsis {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0;
    background: #FFF;
}

DEMO

这具有跨平台兼容的优点，CSS省略号属性不具备。

修改

我仍然认为你想要完成的东西可以用纯CSS完成，但这对你来说可能是一个更好的解决方案.JQuery明智。

Answer 3

请勿使用text-overflow。

http://jsfiddle.net/WaAL5/2/

<div class="truncate">Facebook</div><a href="http://www.facebook.com">...</a>

的CSS：

.truncate {
    display: inline-block;
    width: 50px;
    white-space: nowrap;
    overflow: hidden;
}

如何将超链接作为文本溢出？

3 个答案:

修改