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实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
vue组件实现进度条效果
Jun 06 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
javascript头像上传代码实例
Sep 28 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
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学习之PHP运算符
2006/10/09 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
python单例模式实例解析
2018/08/28 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Python matplotlib实时画图案例
2020/04/23 Python
浅析python函数式编程
2020/09/26 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
一篇.NET面试题
2014/09/29 面试题
机关出纳岗位职责
2014/04/03 职场文书
小学生评语集锦
2014/04/18 职场文书
生活部的活动方案
2014/08/19 职场文书
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers