JQuery 控制內(nèi)容長(zhǎng)度超出規(guī)定長(zhǎng)度顯示省略號(hào)
更新時(shí)間:2014年05月23日 14:58:30 作者:
這篇文章主要介紹JQuery如何實(shí)現(xiàn)控制內(nèi)容長(zhǎng)度超出規(guī)定長(zhǎng)度顯示省略號(hào),需要的朋友可以參考下
長(zhǎng)度超出規(guī)定長(zhǎng)度,顯示省略號(hào)
設(shè)置class為displayPart,
設(shè)置自定義屬,displayLength可顯示長(zhǎng)度(不包含...),雙字節(jié)字符,長(zhǎng)度 *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>
<!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>
設(shè)置class為displayPart,
設(shè)置自定義屬,displayLength可顯示長(zhǎng)度(不包含...),雙字節(jié)字符,長(zhǎng)度 *2,
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)控制文字內(nèi)容溢出用省略號(hào)(…)表示的方法
- Jquery循環(huán)截取字符串的方法(多出的字符串處理成"...")
- jQuery(js)獲取文字寬度(顯示長(zhǎng)度)示例代碼
- 用jquery實(shí)現(xiàn)輸入框獲取焦點(diǎn)消失文字
- jquery xMarquee實(shí)現(xiàn)文字水平無(wú)縫滾動(dòng)效果
- jQuery計(jì)算textarea中文字?jǐn)?shù)(剩余個(gè)數(shù))的小程序
- jQuery實(shí)現(xiàn)長(zhǎng)文字部分顯示代碼
- input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)
- jquery實(shí)現(xiàn)微博文字輸入框 輸入時(shí)顯示輸入字?jǐn)?shù) 效果實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)文字超過(guò)1行、2行或規(guī)定的行數(shù)時(shí)自動(dòng)加省略號(hào)的方法
相關(guān)文章
jquery 單引號(hào)和雙引號(hào)的區(qū)別及使用注意
在js中單引號(hào)和雙引號(hào)都是一樣的,平時(shí)使用的時(shí)候盡量用單引號(hào),只有碰到嵌套的時(shí)候才會(huì)同時(shí)用兩種引號(hào),感興趣的朋友可以了解下2013-07-07jquery autocomplete自動(dòng)完成插件的的使用方法
最近剛開始學(xué)jquery,想實(shí)現(xiàn)類似GOOGLE搜索時(shí)自動(dòng)顯示出相關(guān)結(jié)果的效果。于是選擇了使用jquery autocomplete插件。2010-08-08jquery slibings選取同級(jí)其他元素的實(shí)現(xiàn)代碼
jquery選取同級(jí)其他元素可以使用slibings方法,end方法可以清除之前的鏈?zhǔn)讲僮?,相?dāng)于重新開始2013-11-11jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效代碼分享
這篇文章主要介紹了jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效,一段清新可愛(ài)的焦點(diǎn)圖輪播代碼,有需要的小伙伴可以參考下2015-09-09jQuery中對(duì)節(jié)點(diǎn)進(jìn)行操作的相關(guān)介紹
本篇文章小編將為大家介紹,在jQuery中對(duì)節(jié)點(diǎn)進(jìn)行操作的解決辦法,有需要的朋友可以參考一下2013-04-04jQuery添加options點(diǎn)擊事件并傳值實(shí)例代碼
這篇文章主要介紹了jQuery添加options點(diǎn)擊事件并傳值實(shí)例代碼,非常具有參考價(jià)值,需要的朋友一起看下吧2016-05-05以WordPress為例講解jQuery美化頁(yè)面Title的方法
鼠標(biāo)移動(dòng)到超鏈接時(shí)顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁(yè)面Title的方法,需要的朋友可以參考下2016-05-05