首頁 > web前端 > js教程 > 主體

js實作超出文字變成省略號

小云云
發布: 2018-03-02 15:32:06
原創
2634 人瀏覽過

在實際的項目中,由於文字內容的長度不確定性和頁面佈局的固定性,難免會出現文字內容超過p(或其他標籤,下同)區域的情況,此時比較好的做法就是當文字超過限定的p寬度後自動以省略號(…)顯示,這樣,按照習慣,人們都會知道這兒有文字被省略了。 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

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

isCharLimit false     依字元的長度限制超過顯示省略號##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所有的程式碼如下:

/*
 
* 基于JS的MultiEllipsis
 
* @author tugenhua
 
*/
 
function MultiEllipsis(options) {
 
  var self = this;
 
  self.options = $.extend({},defaults,options || {});
 
  self._init();
 
}
 
$.extend(MultiEllipsis.prototype,{
 
   // 页面初始化
 
  _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});
 
    }
 
    // 如果是按照字符来限制的话 那么就不按照高度来比较 直接返回
 
    if(cfg.isCharLimit) {
 
      self._charCompare();
 
      return;
 
    }
 
    self._compareHeight(cfg.lineHeight * cfg.limitLineNumber);
 
  },
 
  /*
 
   * 按照字符的长度来比较 来显示文本
 
   * @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);
 
    }
 
  },
 
  /*
 
   * 获取目标元素的text
 
   * 如果有属性 data-text 有值的话 那么先获取这个值 否则的话 直接去html内容
 
   * @method getText {public}
 
   */
 
  getText: function(){
 
    var self = this,
 
      cfg = self.options;
 
    return $.trim($($(cfg.targetCls + "")[0]).html());
 
  },
 
  /*
 
   * 设置dom元素文本
 
   * @method setText {public}
 
   */
 
  setText: function(text){
 
    var self = this,
 
      cfg = self.options;
 
    $($(cfg.targetCls + "")[0]).html(text);
 
  },
 
  /*
 
   * 通过配置项的 行数 * 一行的行高 是否大于或者等于当前的高度
 
   * @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;
 
    // 设置元素的文本
 
    self.setText(curText);
 
    // 继续调用函数进行比较
 
    self._compareHeight(cfg.lineHeight * cfg.limitLineNumber);
 
  },
 
  /*
 
   * 返回当前dom的高度
 
   */
 
  _getTargetHeight: function(){
 
    var self = this,
 
      cfg = self.options;
 
    return $($(cfg.targetCls + "")[0]).height();
 
  }
 
});
 
var defaults = {
 
  'targetCls'        :   null,         // 目标要截取的容器
 
  'limitLineNumber'     :   1,           // 限制的行数 通过 行数 * 一行的行高 >= 容器的高度
 
  'type'          :   '...',         // 超过了长度 显示的type 默认为省略号
 
  'lineHeight'       :   18,         // dom节点的行高
 
  'isShowTitle'       :    true,        // title是否显示所有的内容 默认为true
 
  'isCharLimit'       :   false,        // 根据字符的长度来限制 超过显示省略号
 
  'maxLength'        :   20          // 默认为20
 
};
登入後複製

相關推薦:

#CSS限制顯示字數超出部分用省略號表示

標題文字溢出顯示省略號'......'的方法

html文字控制顯示字數超出用省略號的方法

以上是js實作超出文字變成省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板