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 使用手册(六)
Sep 23 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php 魔术方法使用说明
2009/10/20 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
js实现动态时钟
2020/03/12 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
python字符串替换的2种方法
2014/11/30 Python
python交互式图形编程实例(二)
2017/11/17 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
一年级语文教学随笔
2015/08/14 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
Java 多线程协作作业之信号同步
2022/05/11 Java/Android