界定页面呈现的文本字符长度,使用JS和CSS限制页面突显的字符长度

复制代码%20代码如下:

<nav%20class=”cf_nav%20clearfix”>%20 

<nav%20class=”cf_nav%20clearfix”>
<ul>
<li>
<a%20href=””
title=”首页”>
<div%20class=”nav_block”>
<span>首页</span>
<span%20class=”hover”>首页</span>
</div>
</a>
</li>
<li>
<a
href=””
title=”投稿”>
<div%20class=”nav_block”>
<span>投稿</span>
<span%20class=”hover”>投稿</span>
</div>
</a>
</li>
<li>
<a%20href=”%20″%20title=”私信%20″>
<div%20class=”nav_block”>
<span>私信%20</span>
<span%20class=”hover”>私信%20</span>
</div>
</a>
</li>
<li>
<a
href=””
title=”存档”>
<div%20class=”nav_block”>
<span>存档</span>
<span%20class=”hover”>存档</span>
</div>
</a>
</li>
<li>
<a%20href=””
title=”订阅”>
<div%20class=”nav_block”>
<span>订阅</span>
<span%20class=”hover”>订阅</span>
</div>
</a>
</li>%20%20

 %20<ul>%20 

如果我在限制上面的span中的字符。
$(“nav_block%20span”).wordLimit(8);
它使用了下面的一个算定义jquery插件的方法,这是我从点点网扣下来的:%20%20

 %20 %20<li>%20 

复制代码%20代码如下:

 %20 %20 %20<a
href=””
title=”首页”>%20 

//%20copyright%20c%20by%20zhangxinxu%20v1.0%202009-09-05
//%20
/*%20$(“.test1”).wordLimit();
自动获取css宽度进行处理,如果css中未对.test1给定宽度,则不起作用
$(“.test2”).wordLimit(24);
截取字符数,值为大于0的整数,这里表示class为test2的标签内字符数最多24个
*/
(function($){
$.fn.wordLimit%20=%20function(num){
this.each(function(){
if(!num){
var%20copyThis%20=%20$(this.cloneNode(true)).hide().css({
‘position’:%20’absolute’,
‘width’:%20’auto’,
‘overflow’:%20’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();%20//清除复制
return;
}
}else{
var%20maxwidth=num;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+’…’);
}
}
});
}
})(jQuery);%20%20

 %20 %20 %20 %20<div%20class=”nav_block”>%20 

您可能感兴趣的文章:

  • js判断字符长度及中英文数字等
  • js判断字符长度以及中英文数字等
  • javascript
    判断中文字符长度的函数代码
  • JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
  • js关于字符长度限制的问题示例探讨
  • JS按字节截取字符长度实例
  • 限制textbox或textarea输入字符长度的JS代码
  • js实现正则匹配中文标点符号的方法
  • js中判断数字\字母\中文的正则表达式
    (实例)
  • 中文用户名的js检验正则
  • javascript判断中文的正则
  • JavaScript中英文字符长度统计方法示例【按照中文占2个字符】

 %20 %20 %20 %20 %20<span>首页</span>%20 

 %20 %20 %20 %20 %20<span%20class=”hover”>首页</span>%20 

 %20 %20 %20 %20</div>%20 

 %20 %20 %20</a>%20 

 %20 %20</li>%20 

 %20 %20  

 %20 %20<li>%20 

 %20 %20 %20<a
href=””
title=”投稿”>%20 

 %20 %20 %20 %20<div%20class=”nav_block”>%20 

 %20 %20 %20 %20 %20<span>投稿</span>%20 

 %20 %20 %20 %20 %20<span%20class=”hover”>投稿</span>%20 

 %20 %20 %20 %20</div>%20 

 %20 %20 %20</a>%20 

 %20 %20</li>%20 

 %20 %20  

 %20 %20  

 %20 %20<li>%20 

 %20 %20 %20<a%20href=”%20″%20title=”私信
“>%20 

 %20 %20 %20 %20<div%20class=”nav_block”>%20 

 %20 %20 %20 %20 %20<span>私信%20</span>%20 

 %20 %20 %20 %20 %20<span%20class=”hover”>私信%20</span>%20 

 %20 %20 %20 %20</div>%20 

 %20 %20 %20</a>%20 

 %20 %20</li>%20 

 %20 %20  

 %20 %20<li>%20 

 %20 %20 %20<a
href=””
title=”存档”>%20 

 %20 %20 %20 %20<div%20class=”nav_block”>%20 

 %20 %20 %20 %20 %20<span>存档</span>%20 

 %20 %20 %20 %20 %20<span%20class=”hover”>存档</span>%20 

 %20 %20 %20 %20</div>%20 

 %20 %20 %20</a>%20 

 %20 %20</li>%20 

 %20 %20<li>%20 

 %20 %20 %20<a
href=””
title=”订阅”>%20 

 %20 %20 %20 %20<div%20class=”nav_block”>%20 

 %20 %20 %20 %20 %20<span>订阅</span>%20 

 %20 %20 %20 %20 %20<span%20class=”hover”>订阅</span>%20 

 %20 %20 %20 %20</div>%20 

 %20 %20 %20</a>%20 

 %20 %20</li>%20 

 

<nav%20class=”cf_nav%20clearfix”>

 %20<ul>

 %20 %20<li>

 %20 %20 %20<a
href=””
title=”首页”>

 %20 %20 %20 %20<div%20class=”nav_block”>

 %20 %20 %20 %20 %20<span>首页</span>

 %20 %20 %20 %20 %20<span%20class=”hover”>首页</span>

 %20 %20 %20 %20</div>

 %20 %20 %20</a>

 %20 %20</li>

 %20  

 %20 %20<li>

 %20 %20 %20<a
href=””
title=”投稿”>

 %20 %20 %20 %20<div%20class=”nav_block”>

 %20 %20 %20 %20 %20<span>投稿</span>

 %20 %20 %20 %20 %20<span%20class=”hover”>投稿</span>

 %20 %20 %20 %20</div>

 %20 %20 %20</a>

 %20 %20</li>

 %20  

 %20  

 %20 %20<li>

 %20 %20 %20<a%20href=”%20″%20title=”私信
“>

 %20 %20 %20 %20<div%20class=”nav_block”>

 %20 %20 %20 %20 %20<span>私信%20</span>

 %20 %20 %20 %20 %20<span%20class=”hover”>私信%20</span>

 %20 %20 %20 %20</div>

 %20 %20 %20</a>

 %20 %20</li>

 %20  

 %20 %20<li>

 %20 %20 %20<a
href=””
title=”存档”>

 %20 %20 %20 %20<div%20class=”nav_block”>

 %20 %20 %20 %20 %20<span>存档</span>

 %20 %20 %20 %20 %20<span%20class=”hover”>存档</span>

 %20 %20 %20 %20</div>

 %20 %20 %20</a>

 %20 %20</li>

 %20 %20<li>

 %20 %20 %20<a
href=””
title=”订阅”>

 %20 %20 %20 %20<div%20class=”nav_block”>

 %20 %20 %20 %20 %20<span>订阅</span>

 %20 %20 %20 %20 %20<span%20class=”hover”>订阅</span>

 %20 %20 %20 %20</div>

 %20 %20 %20</a>