1

我有一个ul>li包含文件路径列表的结构。它在一个大约 200 像素宽的容器中，因此它会将较长的路径沿一条线包裹起来，这可以正常工作但并不理想。

我可以使用text-overflow: ellipses哪个效果很好，除了我主要关心的是能够看到文件名，所以最好将它切断开头并显示结尾。

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

关于解决此问题的好方法的任何想法？

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

4

2 回答 2

1

text-overflow是一个不错的 CSS 功能，但它在某种程度上受限于它提供的功能。它所做的只是截断文本并在文本末尾添加一个省略号；它没有选项或灵活性来做你在这里要求的事情。

当 Mozilla 在 FF7 之前拒绝在 Firefox 中支持它时，很多人（包括我自己）都大惊小怪，但 Mozilla 由于缺乏灵活性而给出的不早支持它的理由是正确的。

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

于 2012-11-30T20:48:47.757 回答
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 来为您计算此值来克服此问题，但请参阅此问题。

于 2012-11-30T20:58:06.653 回答