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 相关文章推荐
jquery checkbox实现单选小例
Nov 27 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
JS实现4位随机验证码
Oct 19 Javascript
Vue详细的入门笔记
May 10 Vue.js
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
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
js实现批量删除功能
2020/08/27 Javascript
Python的mysql数据库的更新如何实现
2017/07/31 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python unittest单元测试框架总结
2018/09/08 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
XML文档面试题
2015/08/05 面试题
关于廉洁的广播稿
2014/01/30 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
党员作风建设自查报告
2014/10/23 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
《去年的树》教学反思
2016/02/18 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
golang生成并解析JSON
2022/04/14 Golang