CSS文本溢出前置省略号

Question

我有一个ul>li结构的文件路径列表。它在一个大约200px宽的容器中，因此它将更长的路径包装在一条工作正常但不令人满意的线路上。

我可以使用text-overflow: ellipses这很好，除了我主要关心的是能够看到文件名，所以它会更好地切断开头并显示结束。

我敢肯定，这是不可能的CSS，所以我假设我需要使用JS，唯一的问题是我需要它尽可能不显眼 - li中的文本是当对象被点击时引用。

任何想法的方法来解决这个问题？

我知道人们总是希望代码，所以这里是我在做什么：http://jsfiddle.net/qbvcn/

Answer 1

简单的解决办法是这样的（假设你会愿意使用jQuery）：

​$('li').each(function() { 
    var $this = $(this); 
    if ($this.text().length > 20) { 
     $this.html($this.text().replace(/^(.*)(.{17})$/, '<span style="display:none">\$1</span><span class="ellipsis">...</span>\$2')); 
    } 
});​​​​​​​ 

这是真的只打算，如果你知道你的元素可以容纳的字符数工作。虽然你可以通过添加一些javascript来为你计算这个值来克服这个问题，see this question。

Answer 2

text-overflow是一个很好的CSS功能有，但它是比较有限的，以它提供的功能。它所做的只是截断并在文本的末尾添加一个省略号;它没有选择或灵活性来做你在这里要求的东西。

当Mozilla拒绝在Firefox中支持Firefox时，很多人（including myself）都大惊小怪，但由于缺乏灵活性，Mozilla提供的不支持它的原因是正确的。

简单的事实是，如果你想要的不仅仅是一个简单的尾随省略号，你需要在Javascript中完成它。 @GolezTrol在评论中指出的ThreeDots jQuery plugin可能会有用。但还有其他选择。