截斷通過PHP或CSS長字符串用省略號在Firefox

Question

可能重複：
text-overflow:ellipsis in Firefox 4?

我在Truncating long strings with CSS: feasible yet?提到同樣的問題。因爲這個職位它已經近兩年，和Firefox仍然忽略text-overflow: ellipsis;財產。

我目前的解決辦法是截斷長的字符串在PHP中像這樣：

if(strlen($some_string) > 30) 
    $some_string = substr($some_string,0,30)."..."; 

或多或少的作品，但它看起來並不漂亮或支持它的瀏覽器爲準確text-overflow: ellipsis;。由於我沒有使用等寬字體，因此三十個字符的實際寬度會有所不同。在其他線程中發佈的XML修補程序和jQuery插件似乎不再適用於Firefox。

有現任方式CSS可以做到這一點是獨立於瀏覽器？如果沒有，是否有測量給予了字體和字體大小在PHP這樣我可以更精確地放置我的省略號一個字符串的寬度的方法嗎？

Answer 1

This answer可能對於將您的輸出截斷爲最近的單詞很有用，然後將一個…（＆hellip;）HTML實體附加到輸出的末尾以獲得最終輸出。

正如你已經注意到了足夠有沒有廣泛的瀏覽器支持的尚未解決的CSS着呢，你仍然有擔心舊的瀏覽器了。

Answer 2

這是一個恥辱，所有的瀏覽器不處理相同的CSS功能。然而，你總是可以用JavaScript做這樣的事情（在jQuery的幫助下）。

這裏有這樣的事情會如何看一個例子：http://jsfiddle.net/VFucm/

的基本思路是把你的字符串轉換成單詞數組，像這樣：通過他們

var words = full.split(/\s+/g); 

循環，走第一N（在這種情況下我選擇24），並將其推入另一個數組：

for (var i = 0; i < 24; i++) { 
    short.push(words[i]); 
} 

擲它們放回它們來自的HTML元素：

$('.snip').html(short.join(" ") + ' <span class="expand">...</span>'); 

...這裏我添加了一個「鏈接」來擴展短文本。它的外觀和行爲就像使用CSS的鏈接。我還提供了一個功能，以取代再次FOLL文本縮短文本：

$('.expand').click(function() { 
    $('.snip').html(full); 
});