模擬CSS2中的文本溢出：省略號

Question

有什麼辦法可以用CSS2來模擬text-overflow: ellipsis？

我發現這個解決方案，emulates text-overflow:ellipsis in firefox with CSS，但它不工作。

我對JavaScript解決方案不感興趣。

Answer 1

真的沒有在CSS滿意的方式來達到同樣的結果text-overflow實際上並沒有使用text-overflow。已經有幾次嘗試，但沒有任何真正的工作。

我見過的唯一可以工作的非Javascript解決方案是在樣式表中使用-moz-binding將一個XUL代碼塊附加到元素上，該元素完成了省略號。這在Firefox 3.x中運行良好（除了一些副作用），但由於安全考慮，它們不再適用於Firefox 4及更高版本，因爲它們放棄了對綁定功能的支持。

好消息是，text-overflow正在引入Firefox，並應該與FF7（由於其加速發佈週期今年晚些時候到期）抵達。這仍然是一個等待的方法，但至少我們知道它現在就要到了。

與此同時，火狐4/5/6仍然是唯一的主要的瀏覽器，你根本無法在CSS工作省略號，沒有我見過的任何好的替代

一個創造性的解決方案是使用一個漸變透明效果在文本元素的右側，以產生淡出效果而不是使用省略號。這是一個不同的外觀，但提供了省略號所做的相同類型的視覺提示，並且可以在大多數瀏覽器中實現它（儘管您可能更喜歡使其特定於Firefox，並繼續對所有其他瀏覽器使用省略號）。

希望有所幫助。

順便說一句，您可能也對這個問題感興趣，我在幾個月前對它進行了詳細討論：text-overflow:ellipsis in Firefox 4? (and FF5)

Answer 2

這一次似乎除了Ubuntu的+ Chrome瀏覽器工作無處不在： http://mattsnider.com/css/css-string-truncation-with-ellipsis/

羅盤實現： http://compass-style.org/reference/compass/typography/text/ellipsis/