CSS(js)限制页面显示的文本字符长度

代码如下:

<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);

赞 (0)

相关推荐

  • 限制textbox或textarea输入字符长度的JS代码

    复制代码 代码如下: <script language=javascript> <!-- String.prototype.len=function(){ return this.replace(/[^\x00-\xff]/g,"**").length; } //Set maxlength for multiline TextBox function setMaxLength(object,length) { var result = true; var contro

  • js中判断数字\字母\中文的正则表达式 (实例)

    /* 判断指定的内容是否为空,若为空则弹出 警告框 */ function isEmpty(theValue, strMsg){ if(theValue==""){ alert(strMsg+"不能为空!"); return true; } return false; } /* 中文判断函数,允许生僻字用英文"*"代替 返回true表示是符合条件,返回false表示不符合 */ function isChinese(str){ var badCh

  • javascript 判断中文字符长度的函数代码

    JS的字符串都是string对象,可以用string对象的length属性可以获取其长度,但是无论是中文.全角符号以及英文最小长度单位都是1,这与php的strlen()并不相同. 复制代码 代码如下: function strlen(str) { var s = 0; for(var i = 0; i < str.length; i++) { if(str.charAt(i).match(/[u0391-uFFE5]/)) { s += 2; } else { s++; } } return

  • 中文用户名的js检验正则

    username1: "(^[a-zA-Z]{1}([a-zA-Z0-9_]){4,14}|(^[\u4E00-\uFA29]{1}+[a-zA-Z0-9\u4E00-\uFA29]{2,7}))$", 复制代码 代码如下: <script> <!-- function checkStr(str){ // [\u4E00-\uFA29]|[\uE7C7-\uE7F3]汉字编码范围 var re1 = new RegExp("^([\u4E00-\uFA29]

  • js判断字符长度及中英文数字等

    js判断字符长度及中英文数字等

    复制代码 代码如下: <script type="text/javascript"> var zfl={}; zfl.GetLength = function(str){ var realLength = 0,len = str.length,charCode = -1; for(var i=0;i<len;i++){ charCode = str.charCodeAt(i); if(charCode>0 && charCode<=128)

  • js关于字符长度限制的问题示例探讨

    复制代码 代码如下: var fun = function(str){ var preg = new RegExp("[\u4e00-\u9fa5]+","gi"); var preg2 = new RegExp("[^\u4e00-\u9fa5]","gi"); var count = 0; for(var i=0;i<str.length;i++){ if(preg.test(str[i])){ count = co

  • javascript判断中文的正则

    匹配中文字符的正则表达式: [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内):[^\x00-\xff] 复制代码 代码如下: <script>  function isChinese(temp)  {   var re = /[^\u4e00-\u9fa5]/;   if(re.test(temp)) return false;   return true;  }  alert(isChinese("中文"));  </script>

  • JS按字节截取字符长度实例

    * * 处理过长的字符串,截取并添加省略号 * 注:半角长度为1,全角长度为2 *  * pStr:字符串 * pLen:截取长度 *  * return: 截取后的字符串 * 复制代码 代码如下: function autoAddEllipsis(pStr, pLen) { var _ret = cutString(pStr, pLen);     var _cutFlag = _ret.cutflag;     var _cutStringn = _ret.cutstring; if ("1

  • js判断字符长度以及中英文数字等

    js判断字符长度以及中英文数字等

    核心函数: 复制代码 代码如下: <script type="text/javascript"> var zfl={}; zfl.GetLength = function(str){ var realLength = 0,len = str.length,charCode = -1; for(var i=0;i<len;i++){ charCode = str.charCodeAt(i); if(charCode>0 && charCode<

  • JavaScript判断字符长度、数字、Email、电话等常用判断函数分享

    /**************************************************************** //* 名 称:DataLength //* 功 能:计算数据的长度 //* 入口参数:fData:需要计算的数据 //* 出口参数:返回fData的长度(Unicode长度为2,非Unicode长度为1) //***************************************************************** function Dat

  • JavaScript中英文字符长度统计方法示例【按照中文占2个字符】

    本文实例讲述了JavaScript中英文字符长度统计方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS中英文字符串长度计算</title> </head> <body> <script> var oriText = "

  • js实现正则匹配中文标点符号的方法

    js实现正则匹配中文标点符号的方法

    本文实例讲述了js正则匹配中文标点符号的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>js正则匹配中文标点符号</title> <head> <body> <input ty

随机推荐