快捷導(dǎo)航

JQuery 控制內(nèi)容長度超出規(guī)定長度顯示省略號

更新時間：2014年05月23日 14:58:30 作者：

這篇文章主要介紹JQuery如何實現(xiàn)控制內(nèi)容長度超出規(guī)定長度顯示省略號,需要的朋友可以參考下

長度超出規(guī)定長度，顯示省略號

設(shè)置class為displayPart，

設(shè)置自定義屬，displayLength可顯示長度（不包含...），雙字節(jié)字符，長度 *2，

 
<script type="text/javascript"> 
$.fn.extend({ 
displayPart:function () { 
var displayLength = 100; 
displayLength = this.attr("displayLength") || displayLength; 
var text = this.text(); 
if (!text) return ""; 

var result = ""; 
var count = 0; 
for (var i = 0; i < displayLength; i++) { 
var _char = text.charAt(i); 
if (count >= displayLength) break; 
if (/[^x00-xff]/.test(_char)) count++; //雙字節(jié)字符，//[u4e00-u9fa5]中文 

result += _char; 
count++; 
} 
if (result.length < text.length) { 
result += "..."; 
} 
this.text(result); 
} 
}); 

$(function () { 
$(".displayPart").displayPart(); 
}); 

</script> 

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
</head> 

<body> 
<h2>hello world</h2> 

<div style="width:500px;"> 
hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world!!! 
</div> 
<hr> 
<h2>hello</h2> 
<div class="displayPart" displayLength="40"> hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhelloworldhello worldhello worldhello worldhello worldhello worldhello world 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery源碼分析之sizzle選擇器詳解
jquery從1.3開始，使用了新的選擇器–sizzle。效率超過了以前的jquery版本的其他選擇器。下面這篇文章主要介紹了jQuery源中sizzle選擇器的相關(guān)資料，文中介紹的很詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
jquery動畫效果學(xué)習(xí)筆記（8種效果）
這篇文章分享了一份jquery動畫效果學(xué)習(xí)筆記，針對jquery動畫效果進行細(xì)致解析，對淡入淡出效果、滑動效果進行原理講解，想要學(xué)好jquery動畫效果，就耐心閱讀本文，相信大家會有意想不到的收獲。
2015-11-11
Js與Jq 獲取頁面元素值的方法和差異對比
這篇文章主要介紹了原生js獲取瀏覽器和對象寬高與jquery獲取瀏覽器和對象寬高的方法關(guān)系對比,十分實用，需要的朋友可以參考下
2015-04-04
jQuery實現(xiàn)可兼容IE6的遮罩功能詳解
這篇文章主要介紹了jQuery實現(xiàn)可兼容IE6的遮罩功能,詳細(xì)分析了jQuery遮罩層的布局、樣式及功能實現(xiàn)技巧,需要的朋友可以參考下
2017-09-09
jQuery 如何給Carousel插件添加新的功能
本文給大家介紹如何給Carousel插件添加新的功能，非常方便以后的程序開發(fā)，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧
2016-04-04
jquery div提示框漸隱彈出與隱藏效果
animate彈出后，調(diào)用out函數(shù)消失。
2010-05-05
jquery Mobile入門—外部鏈接切換示例代碼
內(nèi)部鏈接是通過在a標(biāo)簽內(nèi)將href屬性值設(shè)為#+id的形式，外鏈則是在a中增加rel屬性，并將屬性值設(shè)為external,感興趣的朋友可以了解下哦
2013-01-01
Jquery利用mouseenter和mouseleave實現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點擊
這篇文章主要介紹了Jquery利用mouseenter和mouseleave實現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點擊。需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
淺談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
jquery仿QQ商城帶左右按鈕控制焦點圖片切換滾動效果
jquery圖片特效制作仿騰訊QQ商城首頁banner焦點圖片輪播切換效果，帶索引按鈕控制和左右按鈕控制圖片切換，實例代碼如下，感興趣的朋友可以參考下哈
2013-06-06