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 相关文章推荐
JS链式调用的实现方法
Mar 07 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
vue-cli3.0 环境变量与模式配置方法
Nov 08 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中如何实现常用邮箱的基本判断
2014/01/07 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
各种常用的JS函数整理
2013/10/25 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
jquery获取radio值实例
2014/10/16 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JSON相关知识汇总
2015/07/03 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python输入多行字符串的方法总结
2019/07/02 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
追悼会主持词
2014/03/20 职场文书
教师师德承诺书
2014/03/26 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
临时租车协议范本
2014/09/23 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书