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

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

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

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

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

全部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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

• C# double和decimal數(shù)據(jù)類型以截?cái)嗟姆绞奖Ａ糁付ǖ男?shù)位數(shù)
• MSSQL 將截?cái)嘧址蚨M(jìn)制數(shù)據(jù)問題的解決方法
• 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時nvarchar字段長度被截?cái)酁?55的解決方法
• php使用iconv中文截?cái)鄦栴}的解決方法
• PHP截?cái)鄻?biāo)題且兼容utf8和gb2312編碼

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

相關(guān)文章

• 

  mui上拉加載更多下拉刷新數(shù)據(jù)的封裝過程

  mui的上拉加載和下拉刷新類似，都屬于pullRefresh插件。今天小編抽空給大家分享mui上拉加載更多下拉刷新數(shù)據(jù)的封裝過程，需要的朋友參考下吧

  2017-11-11
• 

  javascript實(shí)現(xiàn)搜索篩選功能實(shí)例代碼

  這篇文章主要給大家介紹了關(guān)于javascript實(shí)現(xiàn)搜索篩選功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  2020-11-11
• 

  微信小程序?qū)崿F(xiàn)婚禮邀請函全部流程

  本文介紹了如何使用微信小程序技術(shù)制作個性化的婚禮邀請函,包括頁面布局、交互設(shè)計(jì)和多媒體資源整合,詳細(xì)闡述了從功能需求到頁面設(shè)計(jì)、測試優(yōu)化以及發(fā)布流程的全面開發(fā)步驟,通過本項(xiàng)目,可以提升創(chuàng)意設(shè)計(jì)和用戶體驗(yàn)優(yōu)化的能力,需要的朋友可以參考下

  2024-10-10
• 

  JavaScript 字符編碼規(guī)則

  通過頁面向后臺傳遞中文數(shù)據(jù)時少不了編/解碼。。

  2009-05-05
• 

  JS鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)方法

  程序開發(fā)人員可以使用一些簡單的技術(shù)來改進(jìn)自己的代碼編寫工作。你可以寫一些函數(shù)來處理各種常見任務(wù)，以節(jié)省時間；也可以改進(jìn)一下代碼的實(shí)現(xiàn)方式，比如你可以把方法的鏈?zhǔn)秸{(diào)用技術(shù)用到自己所寫的JS庫中，把自己喜歡的方法串起來調(diào)用。

  2013-03-03
• 

  fastclick插件導(dǎo)致日期(input[type="date"])控件無法被觸發(fā)該如何解決

  這篇文章主要介紹了fastclick插件導(dǎo)致日期(input[type="date"])控件無法被觸發(fā)該如何解決,需要的朋友可以參考下

  2015-11-11
• 

  微信小程序開發(fā)之獲取用戶手機(jī)號碼(php接口解密)

  這篇文章主要介紹了微信小程序開發(fā)之獲取用戶手機(jī)號碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  2020-05-05
• 

  javascript實(shí)現(xiàn)自由編輯圖片代碼詳解

  這篇文章主要介紹了javascript實(shí)現(xiàn)自由編輯圖片代碼詳解，在當(dāng)下的的前端項(xiàng)目中，圖片功能可以說是非常常見的，圖片的展示、圖片的裁剪編輯、圖片的上傳等，那么我們的項(xiàng)目便來了個需求。,需要的朋友可以參考下

  2019-06-06
• 

  微信小程序后臺持續(xù)定位功能使用詳解

  這篇文章主要介紹了微信小程序后臺持續(xù)定位功能使用詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

  2019-08-08
• 

  javascript如何在foreach循環(huán)完成之后執(zhí)行一個回調(diào)函數(shù)

  forEach()是前端開發(fā)中操作數(shù)組的一種方法,主要功能是遍歷數(shù)組,其實(shí)就是 for 循環(huán)的升級版,下面這篇文章主要給大家介紹了關(guān)于javascript如何在foreach循環(huán)完成之后執(zhí)行一個回調(diào)函數(shù)的相關(guān)資料,需要的朋友可以參考下

  2023-11-11

最新評論