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 拾漏补遗
Dec 27 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
js的对象与函数详解
Jan 21 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 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 地区分类排序算法
2013/07/01 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
竞选班长演讲稿500字
2014/08/22 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
初中作文评语
2014/12/25 职场文书
入伍通知书
2015/04/23 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
redis配置文件中常用配置详解
2021/04/14 Redis
AI:如何训练机器学习的模型
2021/04/16 Python
Python中os模块的简单使用及重命名操作
2021/04/17 Python
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android