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