DIV CSS 佈局教程網

<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);