轉自：http://www.jb51.net/article/88566.htm

javascript超過容器後顯示省略號效果

在實際的專案中，由於文字內容的長度不確定性和頁面佈局的固定性，難免會出現文字內容超過div（或其他標籤，下同）區域的情況，此時比較好的做法就是當文字超過限定的div寬度後自動以省略號（…）顯示，這樣，按照習慣，人們都會知道這兒有文字被省略了。css中有個屬性叫做text-overflow:ellipsis;比如使用css可以這樣寫：

{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}僅在Firefox火狐瀏覽器下無法實現文字溢位省略號表示，其文字直接從中間咔掉了,我這邊不講用css怎麼樣來實現這樣的，具體的css實現可以自己百度去，我這邊最主要的是講怎麼樣用JS來實現，怎麼樣通過JS寫一個簡單的元件，我直接呼叫JS的初始化方法就可以實現掉！比如如下效果：

後面的點點點 來提示使用者有更多的內容未顯示完成這樣的效果！

先廢話少說！首先來看看我做的demo效果，就能明白到底是個什麼樣的效果！

想看效果，請點選我！ok？

一： 先來看看元件的配置項：如下：

targetCls

null,    目標要擷取的容器 必填項 預設為null

limitLineNumber 1,     要顯示的行數 預設為1行

type '...',      超過了容器長度 顯示的type 預設為省略號

lineHeight  18,       dom節點的行高 預設行高為18

isShowTitle true ,      title 是否需要title來顯示所有的內容 預設為true

isCharLimit false     根據字元的長度來限制 超過顯示省略號

maxLength 20        預設長度為20 超過字元20後 顯示省略號

二：分析

1.  首先來講講此元件：支援2種方式來擷取字串，第一：根據字元的長度來擷取，超過後顯示省略號，比如我這樣呼叫：

new MultiEllipsis({ 
"targetCls" : '.text8', 
"isCharLimit":true, 
"maxLength": 18

  });

這樣初始化的意思是說，isCharLimit為true是指用字元的個數來擷取，最大的長度maxLength為18，這樣初始化，因為程式碼裡面會首先判斷如果isCharLimit為true的話，就直接按照字元的個數來擷取，比如如下程式碼：

2. 第二種是根據多少行數及高度來擷取的，比如預設配置項的行高是18，如果我想顯示2行，那也就是說高度h = 18*2, 假如容器的高度是100，那麼擷取的方法是：

使用 (100 - type的長度 - 1)  是否大於 18×2，如果大於的話，繼續擷取，否則的不擷取，且顯示省略號效果！如下程式碼：

缺點：但是使用行高擷取的話，如果資料比較少的話，是可以的，但是如果資料很多的話，比如高度為500畫素或者更多的話，那麼相對來說會影響效能的，因為他們每次都要計算n次(n為迴圈呼叫函式多的意思)。

JS所有的程式碼如下：

複製程式碼