WEB开发网
开发学院网页设计JavaScript JS和CSS限制页面显示的字符长度 阅读

JS和CSS限制页面显示的字符长度

 2012-12-27 13:40:11 来源:WEB开发网   
核心提示:<nav class="cf_nav clearfix"> <ul> <li> <a href="http://lizhuangs.18021051d350c3871c0a.tpl.diandian.com" title
<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);

Tags:JS CSS 限制

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接