当前位置：Gxlcms > JavaScript > javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

时间：2021-07-01 10:21:17 帮助过：8人阅读

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所有的代码如下：


  1. /* 
  2. * 基于JS的MultiEllipsis 
  3. * @author tugenhua 
  4. */ 
  5. function MultiEllipsis(options) { 
  6.   var self = this; 
  7.   self.options = $.extend({},defaults,options || {}); 
  8.   self._init(); 
  9. } 
  10. $.extend(MultiEllipsis.prototype,{ 
  11.    // 页面初始化 
  12.   _init: function(){ 
  13.     var self = this, 
  14.       cfg = self.options; 
  15.     if(cfg.targetCls == null || $(cfg.targetCls + "")[0] === undefined) { 
  16.       if(window.console) { 
  17.         console.log("targetCls不为空!"); 
  18.       } 
  19.       return; 
  20.     } 
  21.     if(cfg.isShowTitle) { 
  22.       // 获取元素的文本 添加title属性 
  23.       var title = self.getText(); 
  24.       $(cfg.targetCls ).attr({"title":title}); 
  25.     } 
  26.     // 如果是按照字符来限制的话 那么就不按照高度来比较 直接返回 
  27.     if(cfg.isCharLimit) { 
  28.       self._charCompare(); 
  29.       return; 
  30.     } 
  31.     self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); 
  32.   }, 
  33.   /* 
  34.    * 按照字符的长度来比较 来显示文本 
  35.    * @method _charCompare {private} 
  36.    * @return 返回新的字符串到容器里面 
  37.    */ 
  38.   _charCompare: function(){ 
  39.     var self = this, 
  40.       cfg = self.options; 
  41.     var text = self.getText(); 
  42.     if(text.length > cfg.maxLength) { 
  43.       var curText = text.substring(0,cfg.maxLength); 
  44.       $($(cfg.targetCls + "")[0]).html(curText + cfg.type); 
  45.     } 
  46.   }, 
  47.   /* 
  48.    * 获取目标元素的text 
  49.    * 如果有属性 data-text 有值的话 那么先获取这个值 否则的话 直接去html内容 
  50.    * @method getText {public} 
  51.    */ 
  52.   getText: function(){ 
  53.     var self = this, 
  54.       cfg = self.options; 
  55.     return $.trim($($(cfg.targetCls + "")[0]).html()); 
  56.   }, 
  57.   /* 
  58.    * 设置dom元素文本 
  59.    * @method setText {public} 
  60.    */ 
  61.   setText: function(text){ 
  62.     var self = this, 
  63.       cfg = self.options; 
  64.     $($(cfg.targetCls + "")[0]).html(text); 
  65.   }, 
  66.   /* 
  67.    * 通过配置项的 行数 * 一行的行高 是否大于或者等于当前的高度 
  68.    * @method _compareHeight {private} 
  69.    */ 
  70.   _compareHeight: function(maxLineHeight) { 
  71.     var self = this; 
  72.     var curHeight = self._getTargetHeight(); 
  73.     if(curHeight > maxLineHeight) { 
  74.       self._deleteText(self.getText()); 
  75.     } 
  76.   }, 
  77.   /* 
  78.    * 截取文本 
  79.    * @method _deleteText {private} 
  80.    * @return 返回被截取的文本 
  81.    */ 
  82.   _deleteText: function(text){ 
  83.     var self = this, 
  84.       cfg = self.options, 
  85.       typeLen = cfg.type.length; 
  86.     var curText = text.substring(0,text.length - typeLen - 1); 
  87.     curText += cfg.type; 
  88.     // 设置元素的文本 
  89.     self.setText(curText); 
  90.     // 继续调用函数进行比较 
  91.     self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); 
  92.   }, 
  93.   /* 
  94.    * 返回当前dom的高度 
  95.    */ 
  96.   _getTargetHeight: function(){ 
  97.     var self = this, 
  98.       cfg = self.options; 
  99.     return $($(cfg.targetCls + "")[0]).height(); 
  100.   } 
  101. }); 
  102. var defaults = { 
  103.   'targetCls'        :   null,         // 目标要截取的容器 
  104.   'limitLineNumber'     :   1,           // 限制的行数 通过 行数 * 一行的行高 >= 容器的高度 
  105.   'type'          :   '...',         // 超过了长度 显示的type 默认为省略号 
  106.   'lineHeight'       :   18,         // dom节点的行高 
  107.   'isShowTitle'       :    true,        // title是否显示所有的内容 默认为true 
  108.   'isCharLimit'       :   false,        // 根据字符的长度来限制 超过显示省略号 
  109.   'maxLength'        :   20          // 默认为20 
  110. };

以上这篇javascript超过容器后显示省略号效果的方法(兼容一行或者多行)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！