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 相关文章推荐
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
js实现简单计算器
Nov 22 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
php xfocus防注入资料
2008/04/27 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
Python中的ceil()方法使用教程
2015/05/14 Python
python中字符串的操作方法大全
2018/06/03 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
英国探险旅游专家:Explore
2018/12/20 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
网页美工求职信
2014/02/15 职场文书
个人借条范本
2015/05/25 职场文书
技术入股协议书
2016/03/22 职场文书