<nav class="cf_nav clearfix">
<ul>
<li>
<a href="https://lizhuangs.18021051d350c3871c0a.tpl.diandian.com" title="首頁">
<p class="nav_block">
<span>首頁</span>
<span class="hover">首頁</span>
</p>
</a>
</li>
<li>
<a href="https://lizhuangs.18021051d350c3871c0a.tpl.diandian.com/submit" title="投稿">
<p class="nav_block">
<span>投稿</span>
<span class="hover">投稿</span>
</p>
</a>
</li>
<li>
<a href="https://lizhuangs.diandian.com/inbox " title="私信 ">
<p class="nav_block">
<span>私信 </span>
<span class="hover">私信 </span>
</p>
</a>
</li>
<li>
<a href="https://lizhuangs.18021051d350c3871c0a.tpl.diandian.com/archive" title="存檔">
<p class="nav_block">
<span>存檔</span>
<span class="hover">存檔</span>
</p>
</a>
</li>
<li>
<a href="https://lizhuangs.18021051d350c3871c0a.tpl.diandian.com/rss" title="訂閱">
<p class="nav_block">
<span>訂閱</span>
<span class="hover">訂閱</span>
</p>
</a>
</li>
<nav class="cf_nav clearfix">
<ul>
<li>
<a href="https://lizhuangs.18021051d350c3871c0a.tpl.diandian.com" title="首頁">
<p class="nav_block">
<span>首頁</span>
<span class="hover">首頁</span>
</p>
</a>
</li>
<li>
<a href="https://lizhuangs.18021051d350c3871c0a.tpl.diandian.com/submit" title="投稿">
<p class="nav_block">
<span>投稿</span>
<span class="hover">投稿</span>
</p>
</a>
</li>
<li>
<a href="https://lizhuangs.diandian.com/inbox " title="私信 ">
<p class="nav_block">
<span>私信 </span>
<span class="hover">私信 </span>
</p>
</a>
</li>
<li>
<a href="https://lizhuangs.18021051d350c3871c0a.tpl.diandian.com/archive" title="存檔">
<p class="nav_block">
<span>存檔</span>
<span class="hover">存檔</span>
</p>
</a>
</li>
<li>
<a href="https://lizhuangs.18021051d350c3871c0a.tpl.diandian.com/rss" title="訂閱">
<p class="nav_block">
<span>訂閱</span>
<span class="hover">訂閱</span>
</p>
</a>
</li>
如果我在限制上面的span中的字符。
$("nav_block span").wordLimit(8);
它使用瞭下面的一個算定義jquery插件的方法，這是我從點點網扣下來的：
[css]
// copyright c by zhangxinxu v1.0 2009-09-05
// https://www.zhangxinxu.com
/* $(".test1").wordLimit(); 自動獲取css寬度進行處理，如果css中未對.test1給定寬度，則不起作用
$(".test2").wordLimit(24); 截取字符數，值為大於0的整數，這裡表示class為test2的標簽內字符數最多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(); //清除復制
return;
}
}else{
var maxwidth=num;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'…');
}
}
});
}
})(jQuery);
// copyright c by zhangxinxu v1.0 2009-09-05
// https://www.zhangxinxu.com
/* $(".test1").wordLimit(); 自動獲取css寬度進行處理，如果css中未對.test1給定寬度，則不起作用
$(".test2").wordLimit(24); 截取字符數，值為大於0的整數，這裡表示class為test2的標簽內字符數最多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(); //清除復制
return;
}
}else{
var maxwidth=num;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'…');
}
}
});
}
})(jQuery);