CSS(js)限制页面显示的文本字符长度
2018-10-12 13:54
567 查看
<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限制页面显示的字符长度
- 用 css 限制文本显示长度
- CSS/JS 限制显示字符的数量
- [SharePoint 2010] 限制页面字符显示长度
- js实现超过长度的字符截取指定长度(中文字符算2个字符),超出部分以...显示
- CSS控制文本的长度 超过一行显示省略号的实现方法
- jsp页面限制显示的内容长度
- 限制jsp页面<td>标签显示长度
- 使用Form验证,未登录时登录页面无法显示图片、css、js文件的解决方法
- css控制字符长度超出变成点点点显示(单行,多行)
- 汉字占两个字节,字符占一个字节,不设定宽度限制文本的长度
- jsp页面解决IE浏览器兼容模式下css,js显示问题
- 截取固定长度字符串显示在页面,多余部分显示为省略号(区分汉字和字符)
- JS邮箱正则验证并限制字符长度
- js限制最大输入字符长度
- JS限制文本框录入长度(支持字符限制)
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
- CSS实现限制字数功能当对象内文本溢出时显示省略标记
- js关于字符长度限制的问题