CSS(js)限制頁面顯示的文本字符長度
更新時間：2012年12月27日 17:46:09 作者：
限制頁面顯示的字符長度，一直被眾多網(wǎng)友傾睬，本人也是一fans利用閑暇時間搜集整理了一些實用技巧,需要了解的朋友可以參考下
復(fù)制代碼 代碼如下:
<nav class="cf_nav clearfix">
<ul>
<li>
<a title="首頁">
<div class="nav_block">
<span>首頁</span>
<span class="hover">首頁</span>
</div>
</a>
</li>
<li>
<a title="投稿">
<div class="nav_block">
<span>投稿</span>
<span class="hover">投稿</span>
</div>
</a>
</li>
<li>
<a title="私信 ">
<div class="nav_block">
<span>私信 </span>
<span class="hover">私信 </span>
</div>
</a>
</li>
<li>
<a title="存檔">
<div class="nav_block">
<span>存檔</span>
<span class="hover">存檔</span>
</div>
</a>
</li>
<li>
<a title="訂閱">
<div class="nav_block">
<span>訂閱</span>
<span class="hover">訂閱</span>
</div>
</a>
</li>
如果我在限制上面的span中的字符。
$("nav_block span").wordLimit(8);
它使用了下面的一個算定義jquery插件的方法，這是我從點點網(wǎng)扣下來的：
復(fù)制代碼 代碼如下:
// copyright c by zhangxinxu v1.0 2009-09-05
// http://www.zhangxinxu.com
/* $(".test1").wordLimit(); 自動獲取css寬度進行處理，如果css中未對.test1給定寬度，則不起作用
$(".test2").wordLimit(24); 截取字符數(shù)，值為大于0的整數(shù)，這里表示class為test2的標(biāo)簽內(nèi)字符數(shù)最多24個
*/
(function($){
$.fn.wordLimit = function(num){
this.each(function(){
if(!num){
var copyThis = $(this.cloneNode(true)).hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible'
});
$(this).after(copyThis);
if(copyThis.width()>$(this).width()){
$(this).text($(this).text().substring(0,$(this).text().length-4));
$(this).html($(this).html()+'...');
copyThis.remove();
$(this).wordLimit();
}else{
copyThis.remove(); //清除復(fù)制
return;
}
}else{
var maxwidth=num;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
}
});
}
})(jQuery);
相關(guān)文章
2008-01-01
JavaScript中split與join函數(shù)的進階使用技巧
這篇文章主要介紹了JavaScript中split與join函數(shù)的進階使用技巧,split和join通常被用來操作數(shù)組和字符串之間的轉(zhuǎn)換,需要的朋友可以參考下2016-05-05
深入理解JavaScript系列(1) 編寫高質(zhì)量JavaScript代碼的基本要點
才華橫溢的Stoyan Stefanov，在他寫的由O’Reilly初版的新書《JavaScript Patterns》(JavaScript模式)中，我想要是為我們的讀者貢獻其摘要，那會是件很美妙的事情2012-01-01
本文主要分享了canvas實現(xiàn)鐘表效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了JavaScript仿windows計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Chrome調(diào)試折騰記之JS斷點調(diào)試技巧
這篇文章主要介紹了Chrome調(diào)試折騰記之JS斷點調(diào)試技巧，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
判斷數(shù)組是否包含某個元素的js函數(shù)實現(xiàn)方法
下面小編就為大家?guī)硪黄袛鄶?shù)組是否包含某個元素的js函數(shù)實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
原生js實現(xiàn)倒計時功能（多種格式調(diào)用）
本文主要介紹了原生js實現(xiàn)倒計時（多種格式調(diào)用）的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
跟我學(xué)Node.js（四）---Node.js的模塊載入方式與機制
Node.js中模塊可以通過文件路徑或名字獲取模塊的引用。模塊的引用會映射到一個js文件路徑，除非它是一個Node內(nèi)置模塊。Node的內(nèi)置模塊公開了一些常用的API給開發(fā)者，并且它們在Node進程開始的時候就預(yù)加載了。2014-06-06
JavaScript去除數(shù)組里重復(fù)值的方法
這篇文章主要介紹了JavaScript去除數(shù)組里重復(fù)值的方法,涉及javascript針對數(shù)組操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07