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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
js仿微博动态栏功能
Feb 22 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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学习笔记之 函数声明(二)
2011/06/09 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
javascript自执行函数
2017/02/10 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
工程开工庆典邀请函
2014/02/01 职场文书
简历的自我评价
2014/02/03 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
抄作业检讨书
2014/02/17 职场文书
项目建议书范文
2014/05/12 职场文书
内科护士节演讲稿
2014/09/11 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
python基于机器学习预测股票交易信号
2021/05/25 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android