先前用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. jsp自定义标签1

    1.编写一个实现tag接口的java类 package cn.itcast.web.tag; import java.io.IOException; import javax.servlet.http ...

  2. git查看历史命令

    1 git show git show 分支名/HEAD/hash值 2 git log参数 --oneline 单行信息--decorate 输出commit引用信息--graph 图形化输出--a ...

  3. PDM生成SQL脚本外键重复

    解决办法: 选择Database -> Edit Current DBMS, 弹出DBMS Properties,按下图高亮选择,修改Value的值,把默认的长度改长一点就解决问题.

  4. Delphi调用外部程序函数:WinExec() 和ShellExecute详解

    1,WinExec():   WinExec主要运行EXE文件,不能运行其他类型的文件.不用引用特别单元.   原型:UINT WinExec(exePath,ShowCmd)   示例,我想要用记事 ...

  5. Spark-1.5.2安装

    1.下载scala-2.10.6包解压到指定目录 #SCALA VARIABLES START export SCALA_HOME=/usr/local/scala-2.10.6 export PAT ...

  6. ubuntu实用技巧

    添加alias ~/.bash_alias文件: alias go="python /Users/xhat/Downloads/goagent/local/proxy.py" ~/ ...

  7. Html5——地理定位及地图

    常用的navigator.geolocation对象有以下三种方法: 获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callbac ...

  8. Android:Activity的跳转

    // 实际开发中常用的方法 Intent intent = new Intent(); intent.setClass(MainActivity.this, LoginActivity.class); ...

  9. selenium借助AutoIt识别上传文件Java篇

    官方网站:https://www.autoitscript.com/site/ 从网站上下载AutoIt并安装,安装完成在菜单中会看到图4.13的目录: 图4.13  AutoIt菜单 1.首先打开A ...

  10. win8或win8.1修改注册表失败的原因

    win8 and win8.1 modify the registry need compiled to be different versions according to the os bits.