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 技巧和窍门整理(8个)
Apr 22 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 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生成Gif图片验证码
2013/10/27 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
python绘制双柱形图代码实例
2017/12/14 Python
Python3 replace()函数使用方法
2018/03/19 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python如何计算语句执行时间
2019/11/22 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
python批量修改文件名的示例
2020/09/27 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
美国折扣网站:jClub
2017/08/07 全球购物
PHP面试题大全
2015/10/16 面试题
查询优化的一般准则有哪些
2015/03/08 面试题
幼儿园教学管理制度
2014/02/04 职场文书
十佳护士先进事迹
2014/05/08 职场文书
安装工程师岗位职责
2015/02/13 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
2015年妇委会工作总结
2015/05/22 职场文书