js实现文字截断功能


Posted in Javascript onSeptember 14, 2016

先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦。这里写了一个js的文字截断功能。直接上代码。 

HTML(测试用的): 

<div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div limit="10" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div limit="5" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div limit="2" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div limit="20" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div limit="100" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
<div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>

JS: 

var limit=[];
    var Text=[];
    var Pox=document.getElementsByTagName('*');
    for(var i=0;i<Pox.length;i++){
     if(Pox[i].getAttribute("limit")){
      limit[i]=Pox[i].getAttribute("limit");
      Text[i]=Pox[i].innerHTML;
      if(limit[i]<Text[i].length){
       Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
      }
     }
    }

这里用getElementsByTagName获取所有节点遍历,if(Pox[i].getAttribute("limit"))筛选含有limit这个自定义属性的节点,然后获取各个节点自定义属性limit的值,将其放入limit数组中,把各个节点文字放入Text数组中,将需要截断的值和文本长度作比较,进行截断。 

全部JS,这里写的自调:

<script type="text/javascript">
 window.onload=function(){
  (function limit(){
   var limit=[];
    var Text=[];
    var Pox=document.getElementsByTagName('*');
    for(var i=0;i<Pox.length;i++){
     if(Pox[i].getAttribute("limit")){
      limit[i]=Pox[i].getAttribute("limit");
      Text[i]=Pox[i].innerHTML;
      if(limit[i]<Text[i].length){
      Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
      }
     }
    } 
   }());
   }
</script>

效果图:

js实现文字截断功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
使用js实现数据格式化
Dec 03 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
js单线程的本质 Event Loop解析
Oct 29 Javascript
jQuery版AJAX简易封装代码
Sep 14 #Javascript
原生JS实现首页进度加载动画
Sep 14 #Javascript
jquery判断iPhone、Android设备类型
Sep 14 #Javascript
Angularjs 实现分页功能及示例代码
Sep 14 #Javascript
Angularjs CURD 详解及实例代码
Sep 14 #Javascript
Angular Module声明和获取重载实例代码
Sep 14 #Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 #Javascript
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
一个数据采集类
2007/02/14 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
详解python中的json和字典dict
2018/06/22 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
python实现剪切功能
2019/01/23 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
综治维稳工作承诺书
2014/08/30 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python