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可能會有用。但還有其他選擇。