下面小編就為大家?guī)?lái)一篇javascript超過(guò)容器后顯示省略號(hào)效果的方法(兼容一行或者多行)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。

javascript超過(guò)容器后顯示省略號(hào)效果

在實(shí)際的項(xiàng)目中，由于文字內(nèi)容的長(zhǎng)度不確定性和頁(yè)面布局的固定性，難免會(huì)出現(xiàn)文字內(nèi)容超過(guò)div（或其他標(biāo)簽，下同）區(qū)域的情況，此時(shí)比較好的做法就是當(dāng)文字超過(guò)限定的div寬度后自動(dòng)以省略號(hào)（…）顯示，這樣，按照習(xí)慣，人們都會(huì)知道這兒有文字被省略了。css中有個(gè)屬性叫做text-overflow:ellipsis;比如使用css可以這樣寫(xiě)：

{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}僅在Firefox火狐瀏覽器下無(wú)法實(shí)現(xiàn)文字溢出省略號(hào)表示，其文字直接從中間咔掉了,我這邊不講用css怎么樣來(lái)實(shí)現(xiàn)這樣的，具體的css實(shí)現(xiàn)可以自己百度去，我這邊最主要的是講怎么樣用JS來(lái)實(shí)現(xiàn)，怎么樣通過(guò)JS寫(xiě)一個(gè)簡(jiǎn)單的組件，我直接調(diào)用JS的初始化方法就可以實(shí)現(xiàn)掉！比如如下效果：

后面的點(diǎn)點(diǎn)點(diǎn) 來(lái)提示用戶有更多的內(nèi)容未顯示完成這樣的效果！

先廢話少說(shuō)！首先來(lái)看看我做的demo效果，就能明白到底是個(gè)什么樣的效果！

想看效果，請(qǐng)點(diǎn)擊我！ok？

一： 先來(lái)看看組件的配置項(xiàng)：如下：

targetCls

null,    目標(biāo)要截取的容器 必填項(xiàng) 默認(rèn)為null

limitLineNumber 1,     要顯示的行數(shù) 默認(rèn)為1行

type '...',      超過(guò)了容器長(zhǎng)度 顯示的type 默認(rèn)為省略號(hào)

lineHeight  18,       dom節(jié)點(diǎn)的行高 默認(rèn)行高為18

isShowTitle true ,      title 是否需要title來(lái)顯示所有的內(nèi)容 默認(rèn)為true

isCharLimit false     根據(jù)字符的長(zhǎng)度來(lái)限制 超過(guò)顯示省略號(hào)

maxLength 20        默認(rèn)長(zhǎng)度為20 超過(guò)字符20后 顯示省略號(hào)

二：分析

1.  首先來(lái)講講此組件：支持2種方式來(lái)截取字符串，第一：根據(jù)字符的長(zhǎng)度來(lái)截取，超過(guò)后顯示省略號(hào)，比如我這樣調(diào)用：

new MultiEllipsis({ 

"targetCls" : '.text8', 

"isCharLimit":true, 

"maxLength": 18

  });

這樣初始化的意思是說(shuō)，isCharLimit為true是指用字符的個(gè)數(shù)來(lái)截取，最大的長(zhǎng)度maxLength為18，這樣初始化，因?yàn)榇a里面會(huì)首先判斷如果isCharLimit為true的話，就直接按照字符的個(gè)數(shù)來(lái)截取，比如如下代碼：

2. 第二種是根據(jù)多少行數(shù)及高度來(lái)截取的，比如默認(rèn)配置項(xiàng)的行高是18，如果我想顯示2行，那也就是說(shuō)高度h = 18*2, 假如容器的高度是100，那么截取的方法是：

使用 (100 - type的長(zhǎng)度 - 1)  是否大于 18×2，如果大于的話，繼續(xù)截取，否則的不截取，且顯示省略號(hào)效果！如下代碼：

缺點(diǎn)：但是使用行高截取的話，如果數(shù)據(jù)比較少的話，是可以的，但是如果數(shù)據(jù)很多的話，比如高度為500像素或者更多的話，那么相對(duì)來(lái)說(shuō)會(huì)影響性能的，因?yàn)樗麄兠看味家?jì)算n次(n為循環(huán)調(diào)用函數(shù)多的意思)。

JS所有的代碼如下：

/* 

* 基于JS的MultiEllipsis 

* @author tugenhua 

*/

function MultiEllipsis(options) { 

  var self = this; 

  self.options = $.extend({},defaults,options || {}); 

  self._init(); 

} 

$.extend(MultiEllipsis.prototype,{ 

   // 頁(yè)面初始化 

  _init: function(){ 

    var self = this, 

      cfg = self.options; 

    if(cfg.targetCls == null || $(cfg.targetCls + "")[0] === undefined) { 

      if(window.console) { 

        console.log("targetCls不為空!"); 

      } 

      return; 

    } 

    if(cfg.isShowTitle) { 

      // 獲取元素的文本 添加title屬性 

      var title = self.getText(); 

      $(cfg.targetCls ).attr({"title":title}); 

    } 

    // 如果是按照字符來(lái)限制的話 那么就不按照高度來(lái)比較 直接返回 

    if(cfg.isCharLimit) { 

      self._charCompare(); 

      return; 

    } 

    self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); 

  }, 

  /* 

   * 按照字符的長(zhǎng)度來(lái)比較 來(lái)顯示文本 

   * @method _charCompare {private} 

   * @return 返回新的字符串到容器里面 

   */

  _charCompare: function(){ 

    var self = this, 

      cfg = self.options; 

    var text = self.getText(); 

    if(text.length > cfg.maxLength) { 

      var curText = text.substring(0,cfg.maxLength); 

      $($(cfg.targetCls + "")[0]).html(curText + cfg.type); 

    } 

  }, 

  /* 

   * 獲取目標(biāo)元素的text 

   * 如果有屬性 data-text 有值的話 那么先獲取這個(gè)值 否則的話 直接去html內(nèi)容 

   * @method getText {public} 

   */

  getText: function(){ 

    var self = this, 

      cfg = self.options; 

    return $.trim($($(cfg.targetCls + "")[0]).html()); 

  }, 

  /* 

   * 設(shè)置dom元素文本 

   * @method setText {public} 

   */

  setText: function(text){ 

    var self = this, 

      cfg = self.options; 

    $($(cfg.targetCls + "")[0]).html(text); 

  }, 

  /* 

   * 通過(guò)配置項(xiàng)的 行數(shù) * 一行的行高 是否大于或者等于當(dāng)前的高度 

   * @method _compareHeight {private} 

   */

  _compareHeight: function(maxLineHeight) { 

    var self = this; 

    var curHeight = self._getTargetHeight(); 

    if(curHeight > maxLineHeight) { 

      self._deleteText(self.getText()); 

    } 

  }, 

  /* 

   * 截取文本 

   * @method _deleteText {private} 

   * @return 返回被截取的文本 

   */

  _deleteText: function(text){ 

    var self = this, 

      cfg = self.options, 

      typeLen = cfg.type.length; 

    var curText = text.substring(0,text.length - typeLen - 1); 

    curText += cfg.type; 

    // 設(shè)置元素的文本 

    self.setText(curText); 

    // 繼續(xù)調(diào)用函數(shù)進(jìn)行比較 

    self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); 

  }, 

  /* 

   * 返回當(dāng)前dom的高度 

   */

  _getTargetHeight: function(){ 

    var self = this, 

      cfg = self.options; 

    return $($(cfg.targetCls + "")[0]).height(); 

  } 

}); 

var defaults = { 

  'targetCls'        :   null,         // 目標(biāo)要截取的容器 

  'limitLineNumber'     :   1,           // 限制的行數(shù) 通過(guò) 行數(shù) * 一行的行高 >= 容器的高度 

  'type'          :   '...',         // 超過(guò)了長(zhǎng)度 顯示的type 默認(rèn)為省略號(hào) 

  'lineHeight'       :   18,         // dom節(jié)點(diǎn)的行高 

  'isShowTitle'       :    true,        // title是否顯示所有的內(nèi)容 默認(rèn)為true 

  'isCharLimit'       :   false,        // 根據(jù)字符的長(zhǎng)度來(lái)限制 超過(guò)顯示省略號(hào) 

  'maxLength'        :   20          // 默認(rèn)為20 

}; 

以上這篇javascript超過(guò)容器后顯示省略號(hào)效果的方法(兼容一行或者多行)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考