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 getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
详解php中 === 的使用
2016/10/24 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
python实现字符串和数字拼接
2020/03/02 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
服务理念口号
2014/06/11 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL