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 快捷键设置实现代码
Mar 13 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
javascript事件模型实例分析
Jan 30 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
JavaScript实现雪花飘落效果
Dec 27 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
js confirm()方法的使用方法实例
2013/07/13 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python实现FTP文件传输的实例
2019/07/07 Python
使用pandas读取文件的实现
2019/07/31 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
亮化工程实施方案
2014/03/17 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android