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

Question

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

1. 设置为可点击
2. 样式像超链接

如果可以，如何实现？

目标是当文本溢出时，省略号可以用来显示溢出的文本，并且用户明确知道省略号是可点击的。

- Jayen

---

考虑到 text-overflow 是 CSS 属性，我相信它不是你想要实现的合适工具。 - BoltClock

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/

- Ash

---

它确实使省略号可点击，但其副作用是使整个锚文本可点击。此外，在Firefox 30上它不像超链接那样被样式化。 - Jayen

问题在于减小宽度与问题无关。问题是关于text-overflow而不是复杂的锚点。 - Jayen

你更新的fiddle在Firefox 30中没有显示省略号，在Chrome 34中也没有显示文本。几乎没有人使用Firefox 7。1. 仅省略号部分可点击。不行。2. 样式像锚点。不行。 - Jayen

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

演示

这种方法具有跨平台兼容性，而CSS省略属性则没有。

编辑

我仍然认为你想要实现的目标无法通过纯CSS实现，但这可能是一个更好的JQuery解决方案。

- Ian

---

我不明白这与溢出有什么关系？ - Jayen

这是一种更可靠的实现你想要完成的方式。你不能仅使用HTML/CSS来实现你所寻找的内容，因为CSS属性并不适用于此。当通过溢出属性添加省略号时，它是由浏览器添加的，浏览器决定它的工作方式和外观。 - Ian

我认为你的评论比你的回答更能回答这个问题。 - Jayen

我觉得你忘记保存你的代码片段了，但是我已经保存了它，链接是http://jsfiddle.net/5zEzX/11/。我觉得你把它搞复杂了，所以我做了一个简化版，链接是http://jsfiddle.net/5zEzX/12/。 - Jayen

很酷的技巧，我从未使用过scrollWidth/clientWidth。我喜欢它！ - Ian

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

- Jayen

---

这是一个好主意，但你怎么知道文本何时会溢出，何时不会呢？ - Jayen