截斷div內的文本

Question

我有一些文字是動態的（來自我的數據庫），我需要適合我的div。

我的DIV有一個固定的大小，但是當文字變成長進入兩行。如果文字很長，我想在最後加上三個點，以使其適合一行。

因此，例如My really long text成爲My really lo...

我已經試過多次嘗試，但基本上所有的人都依賴於以某種方式計算字符。這並不是真的幸運，因爲角色沒有固定的寬度。例如，首都W比小我寬得多。

所以我得到兩個問題字符計數方法：

1. 如果文本有許多狹窄的字符，它被切割和...附加，即使該文本實際上在一行即使是原來的形式。

2. 文本包含許多寬字符，它甚至在我把它切成字符的最大數量和追加點兩行結束。

這裏有什麼解決方案（JavaScript或CSS？）考慮文本的實際寬度，而不是字符數？

Answer 1

使用這些樣式：

white-space: nowrap;  /*keep text on one line */ 
overflow: hidden;   /*prevent text from being shown outside the border */ 
text-overflow: ellipsis; /*cut off text with an ellipsis*/ 

Answer 2

你應該看看CSS省略號：http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Answer 3

除了ellipsis，我會建議顯示屏上使用tooltip鼠標懸停時的全部文本。

fiddle

Answer 4

我建議Trunk8

然後你可以做任何文字適合的div大小，修剪，將使其超越1行中的文本（選項可供設置線的量允許）

例如

$('.truncate').trunk8();