CSS(js)限制页面显示的文本字符长度
2012-12-27 00:00
816 查看
<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);
相关文章推荐
- CSS(js)限制页面显示的文本字符长度
- 使用JS和CSS限制页面显示的字符长度
- [SharePoint 2010] 限制页面字符显示长度
- CSS/JS 限制显示字符的数量
- 用 css 限制文本显示长度
- CSS控制文本的长度,超过一行显示省略号
- 用js限制文本输入长度
- JS邮箱正则验证并限制字符长度
- 微信端页面 纯css让文本只显示两行
- js实现超过长度的字符截取指定长度(中文字符算2个字符),超出部分以...显示
- JS限制文本框录入长度(支持字符限制)
- 限制多行文本输入字符限制和显示
- css限制显示字数,文字长度超出部分用省略号表示
- HTML、css、js控制页面元素的显示及个人对浮动的理解
- 截取固定长度字符串显示在页面,多余部分显示为省略号(区分汉字和字符)
- css限制显示字数,文字长度超出部分用省略号表示
- 当内容超出最大的长度的时候,使用CSS使文本显示省略号
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
- css控制字符长度超出变成点点点显示(单行,多行)
- jquery限制div字符长度,超出部分已“…”显示