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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
javascript打印输出json实例
Nov 11 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
jquery中获取select选中值的代码
2011/06/27 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
微信小程序入门教程
2016/11/18 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
python 模拟登陆github的示例
2020/12/04 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
如何利用find命令查找文件
2015/02/07 面试题
生产车间班组长岗位职责
2014/01/06 职场文书
校园安全检查制度
2014/02/03 职场文书
收费员岗位职责
2015/02/14 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server