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 17 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
Angular 4 指令快速入门教程
Jun 07 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
vue实现axios图片上传功能
Aug 20 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/12/30 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
北大青鸟学生求职信
2013/09/24 职场文书
现代化办公人员工作的自我评价
2013/10/16 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
煤矿安全承诺书
2014/05/22 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
2015年端午节活动策划书
2015/05/05 职场文书