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


Posted in Javascript onJuly 14, 2016

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

复制代码

/* 

* 基于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 

};

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

Javascript 相关文章推荐
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 #Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 #Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 #Javascript
原生js仿jquery animate动画效果
Jul 13 #Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 #Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 #Javascript
Javascript类型系统之undefined和null浅析
Jul 13 #Javascript
You might like
php表单提交问题的解决方法
2011/04/12 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PHP面向对象详解(三)
2015/12/07 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
MooTools 1.2介绍
2009/09/14 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
JQuery小知识
2010/10/15 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
详解python单例模式与metaclass
2016/01/15 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
经典c++面试题六
2012/01/18 面试题
2014年父亲节活动方案
2014/03/06 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
换届选举主持词
2015/07/03 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python