先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦。这里写了一个js的文字截断功能。直接上代码。

HTML(测试用的):

  1.      <div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
  2. <div limit="10" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
  3. <div limit="5" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
  4. <div limit="2" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
  5. <div >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
  6. <div limit="20" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
  7. <div limit="100" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
  8. <div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>

JS:

  1. var limit=[];
  2. var Text=[];
  3. var Pox=document.getElementsByTagName('*');
  4. for(var i=0;i<Pox.length;i++){
  5. if(Pox[i].getAttribute("limit")){
  6. limit[i]=Pox[i].getAttribute("limit");
  7. Text[i]=Pox[i].innerHTML;
  8. if(limit[i]<Text[i].length){
  9. Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
  10. }
  11. }
  12. }

这里用getElementsByTagName获取所有节点遍历,if(Pox[i].getAttribute("limit"))筛选含有limit这个自定义属性的节点,然后获取各个节点自定义属性limit的值,将其放入limit数组中,把各个节点文字放入Text数组中,将需要截断的值和文本长度作比较,进行截断。

全部JS,这里写的自调:

  1. <script type="text/javascript">
  2. window.onload=function(){
  3. (function limit(){
  4. var limit=[];
  5. var Text=[];
  6. var Pox=document.getElementsByTagName('*');
  7. for(var i=0;i<Pox.length;i++){
  8. if(Pox[i].getAttribute("limit")){
  9. limit[i]=Pox[i].getAttribute("limit");
  10. Text[i]=Pox[i].innerHTML;
  11. if(limit[i]<Text[i].length){
  12. Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
  13. }
  14. }
  15. }
  16. }());
  17. }
  18. </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. hdu 4712 Hamming Distance(随机数法)

    d.汉明距离是使用在数据传输差错控制编码里面的,汉明距离是一个概念,它表示两个(相同长度)字对应位不同的数量, 我们以d(x,y)表示两个字x,y之间的汉明距离.对两个字符串进行异或运算,并统计结果为 ...

  2. Regex.Replace的基本用法

    Regex构造函数Regex(string pattern)Regex(string pattern,RegexOptions options)参数说明pattern:要匹配的正则表达式模式optio ...

  3. [SQL]获取所有数据库名、获取数据库中表名、获取表中的字段名

    --()获取所有数据库名: Select Name FROM Master..SysDatabases order by Name --()获取所有表名 --XType=''U'':表示所有用户表; ...

  4. android 资源文件

    系统文档:http://developer.android.com/guide/topics/resources/available-resources.html 1. 系统下资源文件夹的名字是固定的 ...

  5. Configure apt-get / git/ curl to use a proxy (Ubuntu)

    http://technoblog.org/2009/07/configure-apt-get-to-use-a-proxy-ubuntu/ Open the following configurat ...

  6. getdata

    public partial class GetData : System.Web.UI.Page { protected void Page_Load(object sender, EventArg ...

  7. POJ 3207 Ikki's Story IV - Panda's Trick

    Ikki's Story IV - Panda's Trick Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 7296   ...

  8. lua绑定c++的时候常见得错误

    1 Error parsing reanslation unit 这种情况,首先来说你的python 2.7以及他的插件安装是完整的,最可能的原因就是自己写的ini文件,header路径错误,可以把这 ...

  9. Android下实现控件的叠加显示

    <FrameLayout android:layout_width="fill_parent" android:layout_height="match_paren ...

  10. 使用postman玩转接口测试

    (一)前言: 之前搞自动化接口测试,由于接口的特性,要验证接口返回xml中的数据,所以没找到合适的轮子,就自己用requests造了个轮子,用着也还行,不过就是case管理有些麻烦,近几天又回头看了看 ...