CSS(js)限制页面显示的文本字符长度
更新时间：2012年12月27日 17:46:09 作者：
限制页面显示的字符长度，一直被众多网友倾睬，本人也是一fans利用闲暇时间搜集整理了一些实用技巧,需要了解的朋友可以参考下
复制代码 代码如下:
<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);
相关文章
本节主要介绍了js监控IE火狐浏览器关闭、刷新、回退、前进事件的方法2014-07-07
这篇文章主要介绍了JS+CSS实现实用的单击输入框弹出选择框的方法,实例分析了javascript操作select及button的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了js+HTML5基于过滤器从摄像头中捕获视频的方法,涉及javascript基于html5元素操作多媒体的使用技巧,需要的朋友可以参考下2015-06-06
canvas有一个神奇的方法getImageData，它可以获取canvas内图像的每一个像素点的颜色值获取，而且可以改变。本文将对canvas实现图片的滤镜转化的方法进行介绍，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
下面小编就为大家带来一篇使用原生js+canvas实现模拟心电图的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
动态添加、删除行想必大家并不陌生，下面为大家介绍通过js是如何实现的，有此需求的朋友可不要错过了哈2013-08-08
这篇文章主要介绍了微信小程序订阅消息功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文总结了一下几个注意点，分享给大家2015-05-05
通常我们有一份webpack.dev.config.js使用webpack-dev-server的proxy，代理到开发服务器，来解决本地跨域问题。假如项目变大，可能需要proxy到不同环境，那么如何解决webpack-dev-server代理常切换问题，下面就一起来了解一下2019-01-01
这篇文章主要为大家详细介绍了Bootstrap table列上下移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
最新评论