JS和CSS限制頁面顯示的字符長度

　　<nav class="cf_nav clearfix"> <ul> <li> <a href="首頁"> <div class="nav_block"> <span>首頁</span> <span class="hover">首頁</span> </div> </a> </li> <li> <a href="投稿"> <div class="nav_block"> <span>投稿</span> <span class="hover">投稿</span> </div> </a> </li> <li> <a href="私信 "> <div class="nav_block"> <span>私信 </span> <span class="hover">私信 </span> </div> </a> </li> <li> <a href="存檔"> <div class="nav_block"> <span>存檔</span> <span class="hover">存檔</span> </div> </a> </li> <li> <a href="訂閱"> <div class="nav_block"> <span>訂閱</span> <span class="hover">訂閱</span> </div> </a> </li>

　　如果我在限制上面的span中的字符
$("nav_block span")wordLimit();

　　
它使用了下面的一個算定義jquery插件的方法這是我從點點網扣下來的

　　// copyright c by zhangxinxu v // /* $("test")wordLimit(); 自動獲取css寬度進行處理如果css中未對test給定寬度則不起作用 $("test")wordLimit(); 截取字符數值為大於的整數這裡表示class為test的標簽內字符數最多個 */ (function($){ $fnwordLimit = function(num){ thiseach(function(){ if(!num){ var copyThis = $(thiscloneNode(true))hide()css({ position: absolute width: auto overflow: visible }); $(this)after(copyThis); if(copyThiswidth()>$(this)width()){ $(this)text($(this)text()substring($(this)text()length)); $(this)html($(this)html()+); copyThisremove(); $(this)wordLimit(); }else{ copyThisremove(); //清除復制 return; } }else{ var maxwidth=num; if($(this)text()length>maxwidth){ $(this)text($(this)text()substring(maxwidth)); $(this)html($(this)html()+); } } }); } })(jQuery);

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20180.html