CSS(js)限制页面显示的文本字符长度


Posted in Javascript onDecember 27, 2012
<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);
Javascript 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 Javascript
jQuery基础框架浅入剖析
Dec 27 #Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 #Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 #Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 #Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 #Javascript
通过jQuery源码学习javascript(三)
Dec 27 #Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 #Javascript
You might like
一些常用的php简单命令代码集锦
2007/09/24 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
php中curl使用指南
2015/02/05 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
javascript时间差插件分享
2016/07/18 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
JavaScript实现图片拖曳效果
2017/09/08 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
pytorch构建多模型实例
2020/01/15 Python
Python进行统计建模
2020/08/10 Python
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
成人继续教育实施方案
2014/03/01 职场文书
求职意向书范文
2014/04/01 职场文书
《称象》教学反思
2014/04/25 职场文书
售票员岗位职责
2015/02/15 职场文书
复兴之路展览观后感
2015/06/02 职场文书
新郎结婚感言
2015/07/31 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang