Question

我有一个ul>li结构，其中包含文件路径列表。它位于一个大约200px宽的容器中，所以它在一条线上包裹更长的路径，但工作正常，但不是很理想。

我可以使用text-overflow: ellipses，除了我的主要关注点是能够看到文件名，所以最好让它切断开头并显示结束。

我很确定这对CSS是不可能的，所以我假设我需要使用JS，唯一的问题是我需要它尽可能不引人注意 - {{1中的文本单击对象时引用。

有什么好的方法可以解决这个问题吗？

我知道人们总是想要代码，所以这就是我正在做的事情：http://jsfiddle.net/qbvcn/

Answer 1

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

许多人（including myself）在Mozilla拒绝在Firefox中支持它之前就开始大惊小怪，但由于缺乏灵活性，Mozilla因为没有及早支持它而给出的理由是正确的。< / p>

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

Answer 2

一个简单的解决方案就是这样（假设你愿意使用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。

CSS文本溢出前置省略号

2 个答案: