jQuery - 添加省略號，斷行但不截斷

Question

我想爲可滾動div內包含的動態文本添加省略號。但是，我不希望文本被截斷。我想要添加橢圓，然後在下一行繼續文本。這是因爲div一次只顯示一行，所以橢圓只是讓用戶知道有更多的內容，他應該點擊滾動箭頭繼續閱讀。

這樣做的最好方法是什麼？ ThreeDots http://tpgblog.com/threedots似乎是一個非常好的插件，有很多選項，但我不知道如何配置它以滿足我的需要。

謝謝你給予的任何幫助。

Answer 1

爲您的DIV提供高度，然後使用text-overflow: ellipsis並防止換行CSS方法。

這裏有一個簡單的例子：

.ellipsis { 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
-o-text-overflow: ellipsis; 
-ms-text-overflow: ellipsis; 
} 

當然，總有別人制造麻煩，而這一次，它是Firefox瀏覽器。你必須將一個文件綁定到CSS。

這比您想象的要容易。只需創建一個新的文本文件，並將其稱爲ellipsis.xml。然後將其粘貼在您可以引用它的Web服務器上的任何位置。

<?xml version="1.0"?> 
<bindings 
    xmlns="http://www.mozilla.org/xbl" 
    xmlns:xbl="http://www.mozilla.org/xbl" 
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
<binding id="ellipsis"> 
    <content> 
    <xul:window> 
    <xul:description crop="end" xbl:inherits="value=xbl:text"><children/>  
     </xul:description> 
    </xul:window> 
    </content> 
</binding> 
</bindings> 

在你的CSS

然後，這樣做：

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); 
} 

這是快速運行下來，以瞭解更多信息請查看這個傢伙：

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

BTW：如果你認爲threedots插件是一個更容易的選擇，我說去吧。