js實現(xiàn)文字截斷功能
先前用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>
效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序如何調(diào)用新聞接口實現(xiàn)列表循環(huán)
這篇文章主要介紹了微信小程序如何調(diào)用新聞接口實現(xiàn)列表循環(huán),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07JavaScript中的this/call/apply/bind的使用及區(qū)別
這篇文章主要介紹了JavaScript中的this/call/apply/bind的使用及區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03微信小程序?qū)崿F(xiàn)自動播放視頻模仿gif動圖效果實例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自動播放視頻模仿gif動圖效果的相關(guān)資料,通過本文介紹的方法可以實現(xiàn)自動播放視頻,視頻無控制條無聲音且自動循環(huán)播放,需要的朋友可以參考下2021-07-07獲取本機IP地址的實例(JavaScript / Node.js)
下面小編就為大家分享一篇使用JavaScript和Node.js獲取本機IP地址的實例,具有很好的參考價值,希望對大家有所幫助2017-11-11