您的位置:首页 > Web前端 > CSS

CSS(js)限制页面显示的文本字符长度

2012-12-27 00:00 816 查看
<nav class="cf_nav clearfix"> 
<ul> 
<li> 
<a href="http://lizhuangs.18021051d350c3871c0a.tpl.diandian.com" title="首页"> 
<div class="nav_block"> 
<span>首页</span> 
<span class="hover">首页</span> 
</div> 
</a> 
</li> 
<li> 
<a href="http://lizhuangs.18021051d350c3871c0a.tpl.diandian.com/submit" title="投稿"> 
<div class="nav_block"> 
<span>投稿</span> 
<span class="hover">投稿</span> 
</div> 
</a> 
</li> 
<li> 
<a href="http://lizhuangs.diandian.com/inbox " title="私信 "> 
<div class="nav_block"> 
<span>私信 </span> 
<span class="hover">私信 </span> 
</div> 
</a> 
</li> 
<li> 
<a href="http://lizhuangs.18021051d350c3871c0a.tpl.diandian.com/archive" title="存档"> 
<div class="nav_block"> 
<span>存档</span> 
<span class="hover">存档</span> 
</div> 
</a> 
</li> 
<li> 
<a href="http://lizhuangs.18021051d350c3871c0a.tpl.diandian.com/rss" title="订阅"> 
<div class="nav_block"> 
<span>订阅</span> 
<span class="hover">订阅</span> 
</div> 
</a> 
</li>

如果我在限制上面的span中的字符。
$("nav_block span").wordLimit(8);
它使用了下面的一个算定义jquery插件的方法,这是我从点点网扣下来的:
// copyright c by zhangxinxu v1.0 2009-09-05 
// http://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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: