熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2013-11-15 12:03:28  來源: JSP教程 

  <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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.