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 相关文章推荐
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jquery分割字符串的方法
Jun 24 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
javascript中this关键字详解
Dec 12 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 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 取得瑞年与平年的天数的代码
2009/08/10 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python中six模块基础用法
2019/12/08 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
校长寄语大全
2014/04/09 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript