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 操作XML入门
Dec 25 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
JS跨域问题详解
Nov 25 Javascript
angularjs基础教程
Dec 25 Javascript
Three.js学习之几何形状
Aug 01 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
js实现跳一跳小游戏
Jul 31 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
async和DOM Script文件加载比较
2014/07/20 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python读取oracle函数返回值
2016/07/18 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python实现车牌识别的示例代码
2019/08/05 Python
python实现复制文件到指定目录
2019/10/16 Python
Python绘制数码晶体管日期
2021/02/19 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
工作自我评价分享
2013/12/01 职场文书
创文明城市标语
2014/06/16 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
2014财务年终工作总结
2014/12/08 职场文书
2015年派出所工作总结
2015/04/24 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python