js實(shí)現(xiàn)文字截?cái)喙δ?/h1>

 更新時(shí)間：2016年09月14日 14:07:02   作者：陌路凡歌  

這篇文章主要為大家詳細(xì)介紹了js代碼如何實(shí)現(xiàn)文字截?cái)喙δ?具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

先前用jq做了一個(gè)文字截?cái)喙δ?，但是不用jq的項(xiàng)目要實(shí)現(xiàn)此功能還要引如jq顯得過(guò)于麻煩。這里寫(xiě)了一個(gè)js的文字截?cái)喙δ?。直接上代碼。 

HTML（測(cè)試用的）： 

<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é)點(diǎn)遍歷，if（Pox[i].getAttribute("limit")）篩選含有l(wèi)imit這個(gè)自定義屬性的節(jié)點(diǎn)，然后獲取各個(gè)節(jié)點(diǎn)自定義屬性limit的值，將其放入limit數(shù)組中，把各個(gè)節(jié)點(diǎn)文字放入Text數(shù)組中，將需要截?cái)嗟闹岛臀谋鹃L(zhǎng)度作比較，進(jìn)行截?cái)唷?nbsp;

全部JS，這里寫(xiě)的自調(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> 

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

• C# double和decimal數(shù)據(jù)類(lèi)型以截?cái)嗟姆绞奖Ａ糁付ǖ男?shù)位數(shù)
• MSSQL 將截?cái)嘧址蚨M(jìn)制數(shù)據(jù)問(wèn)題的解決方法
• oracle中截?cái)啾淼氖褂媒榻B
• js中根據(jù)字?jǐn)?shù)截取字符串，不能截?cái)鄒rl
• c#完美截?cái)嘧址a(中文+非中文)
• PHP UTF8中文字符截?cái)嗪瘮?shù)代碼
• PHP在字符斷點(diǎn)處截?cái)辔淖值膶?shí)現(xiàn)代碼
• PHP連接MSSQL時(shí)nvarchar字段長(zhǎng)度被截?cái)酁?55的解決方法
• php使用iconv中文截?cái)鄦?wèn)題的解決方法
• PHP截?cái)鄻?biāo)題且兼容utf8和gb2312編碼

• js
• 截?cái)?/a>

相關(guān)文章

• 

  微信小程序如何調(diào)用新聞接口實(shí)現(xiàn)列表循環(huán)

  這篇文章主要介紹了微信小程序如何調(diào)用新聞接口實(shí)現(xiàn)列表循環(huán),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

  2019-07-07
• 

  JavaScript中的this/call/apply/bind的使用及區(qū)別

  這篇文章主要介紹了JavaScript中的this/call/apply/bind的使用及區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

  2020-03-03
• 

  D3.js實(shí)現(xiàn)樹(shù)形圖的繪制教程詳解

  樹(shù)形圖（Tree?Diagram）是用來(lái)表示一個(gè)概率空間。樹(shù)形圖可以表示獨(dú)立事件（例如多次擲硬幣）和條件概率（例如不放回的抽卡）。本文將利用D3.js實(shí)現(xiàn)樹(shù)形圖的繪制，需要的可以參考一下

  2022-11-11
• 

  微信小程序?qū)崿F(xiàn)自動(dòng)播放視頻模仿gif動(dòng)圖效果實(shí)例

  這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自動(dòng)播放視頻模仿gif動(dòng)圖效果的相關(guān)資料,通過(guò)本文介紹的方法可以實(shí)現(xiàn)自動(dòng)播放視頻，視頻無(wú)控制條無(wú)聲音且自動(dòng)循環(huán)播放,需要的朋友可以參考下

  2021-07-07
• 

  獲取本機(jī)IP地址的實(shí)例(JavaScript / Node.js)

  下面小編就為大家分享一篇使用JavaScript和Node.js獲取本機(jī)IP地址的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助

  2017-11-11
• 

  js 限制input只能輸入數(shù)字、字母和漢字等等

  js 限制input只能輸入數(shù)字小數(shù)點(diǎn)也不能輸入或者是只能輸入數(shù)字,能輸小數(shù)點(diǎn)等等，本文大致整理了一些，感興趣的朋友可以收藏下

  2013-12-12
• 

  微信小程序使用canvas的畫(huà)圖操作示例

  這篇文章主要介紹了微信小程序使用canvas的畫(huà)圖操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了微信小城序基于canvas的畫(huà)圖操作相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下

  2019-01-01
• 

  js實(shí)現(xiàn)自定義下拉框

  這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)自定義下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2021-11-11
• 

  談一談JS消息機(jī)制和事件機(jī)制的理解

  消息/事件機(jī)制是幾乎所有開(kāi)發(fā)語(yǔ)言都有的機(jī)制，并不是deviceone的獨(dú)創(chuàng)，在某些語(yǔ)言稱(chēng)之為消息(Event),有些地方稱(chēng)之為(Message).接下來(lái)通過(guò)本文給大家介紹JS事件和消息機(jī)制的理解 ，需要的朋友一起學(xué)習(xí)吧

  2016-04-04
• 

  javascript tabIndex屬性

  圍繞表單的可訪問(wèn)性與交互性上，各瀏覽器都下了很大工夫，比如fieldset與legend等用于增強(qiáng)區(qū)域感的元素，for，accessKey，defaultValue，maxlength，tabIndex等用于交互或提示的屬性。不過(guò)，今天只講tabIndex。

  2009-12-12

最新評(píng)論