js實現(xiàn)文字截斷功能

2019-11-20 09:00:20

字體：大中小

供稿：網(wǎng)友

先前用jq做了一個文字截斷功能，但是不用jq的項目要實現(xiàn)此功能還要引如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獲取所有節(jié)點遍歷，if（Pox[i].getAttribute("limit")）篩選含有l(wèi)imit這個自定義屬性的節(jié)點，然后獲取各個節(jié)點自定義屬性limit的值，將其放入limit數(shù)組中，把各個節(jié)點文字放入Text數(shù)組中，將需要截斷的值和文本長度作比較，進行截斷。

全部JS，這里寫的自調(diào)：

<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>

效果圖：