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