使用JS和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>   <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外掛程式的方法，這是我從點點網扣下來的：  [css] // 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);   // 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);