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 用6N±1法求素数 实例教程
Oct 20 Javascript
jQuery示例收集
Nov 05 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
express 项目分层实践详解
Dec 10 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
vue.js的简单自动求和计算实例
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 while循环得到循环次数
2013/10/26 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
深入浅析php json 格式控制
2015/12/24 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
js实现纯前端的图片预览
2016/04/27 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
React-router v4 路由配置方法小结
2017/08/08 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
python del()函数用法
2013/03/24 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python实现石头剪刀布小游戏
2021/01/20 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
浅析Python面向对象编程
2020/07/10 Python
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
协议书模板
2014/04/23 职场文书
个人承诺书格式
2014/06/03 职场文书
办理信用卡工作证明
2014/09/30 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
追悼会答谢词范文
2015/09/29 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python