先前用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实现文字截断的更多相关文章

  1. CSS多行文字截断

    有时候容器的宽度是固定的,但要显示的文字有点多,就需要将多余的文字隐藏,而且为了表示还有字没有显示,用省略号表示. 类似这样: 单行文字 单行文字截断比较明显: .truncate { width: ...

  2. js对文字进行编码

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...

  3. js实现文字逐个显示

    先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...

  4. 使用JS实现文字搬运工

    使用JS实现文字搬运工 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><meta http-equiv=&quo ...

  5. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  6. JS实现文字转语音播放

    JS实现文字转语音播放背景实现方式第一种:百度文字转语音开放API第二种:微软TTS语音引擎第三种:SpeechSynthesisUtterance总结背景在做项目的过程中,经常会遇到场景是客户要求播 ...

  7. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  8. js 实现文字滚动功能,可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  9. JS实现文字截取(雾)

    今天在跳板群那里看到一个神奇的样式,效果: 感觉十分神奇,因为一开始以为他是只有一个P元素包着文字然后最后一个自动截取文字,而且最后一行还可以提前截取???这怎么做到的,然后想了一下css怎么做,好像 ...

随机推荐

  1. Wex5案例使用JSON传输Thinkphp后端对接,以达成数据正常输出

    初步接触Wex5,操作起来还是觉得比较复杂!而且教程不多,让我着实比较烦躁! 因此自己动手丰衣足食!还是比较实在的! 采用版本:WeX5应用快速开发框架V3.5正式版 我们使用Wex5的仿淘宝APP案 ...

  2. arraylist linkedlist性能测试

    import java.util.ArrayList; import java.util.LinkedList; import java.util.List; import java.util.Ran ...

  3. maven项目导入报错

    极大可能是仓库设置问题

  4. HTTP权威指南之连接管理

    TCP连接世界上几乎所有的 HTTP 通信都是由 TCP/IP 承载的, TCP/IP 是全球计算机及网络设备都在使用的一种常用的分组交换网络分层协议集. 客户端应用程序可以打开一条 TCP/IP 连 ...

  5. Codeforces 450D Jzzhu and Cities [heap优化dij]

    #include<bits/stdc++.h> #define MAXN 100050 #define MAXM 900000 using namespace std; struct st ...

  6. 2013 ACM 通化邀请赛 A. Tutor

    A. Tutor Description Lilin was a student of Tonghua Normal University. She is studying at University ...

  7. Jquery 对象转json ,Json转对象。兼容浏览器。

    引入jquery 转json库 [ 文件大小为2.2K] <script type="text/javascript" src="https://jquery-js ...

  8. css选择器nth-child()和nth-of-type()的应用

    <style> .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth- ...

  9. 使用Spring的Property文件存储测试数据 - 添加测试数据

    测试数据直接写在Property文件中,如下图: application.properties是系统自动生成,我添加了两个Property文件:HomeTestData.properties和moto ...

  10. 【翻译习作】 Windows Workflow Foundation程序开发-第一章01

    第 1 章    欢迎来到工作流的世界 …思想如蝴蝶般飞到我身边 —— Gossard / Vedder (译注:Gossard与Vedder是来自Pearl Jam乐队的2名乐手,该句出自他们的歌曲 ...