制作对标签内的字符数进行限制的jquery插件

先看看效果吧（其实这个效果很简单，我只是为了以后方便使用，就弄成插件而已）

我把页面调的很小，然后标题、作者、摘要过长了，所以我使用

 

当这样不就看不到了吗？把鼠标移上去看看，显示效果如下：

教程：

1.新建一个js文件，我命名为htmlHelp.js，意为帮助使用html。

代码如下：

jQuery.extend({    //obj:对象; c:c字体的像素，越大字数限制大,; w:对象的长度    fixTextNO: function(obj, c, align) {        $.each($(obj), function() {            var w = $(this).width();            var n = w / c;            var content = $.trim($(this).text());            $(this).css({ "word-wrap": "break-word", width: w, "vertical-align": top, "text-align": align });            if (content.length > n && content.length > 4) {                var fixContext = getfixText(content, n);                $(this).text(fixContext.substring(0, fixContext.length - 1) + "...");                $(this).mouseover(function() {                    $(this).text(content);                })                $(this).mouseout(function() {                    $(this).text(fixContext.substring(0, fixContext.length - 1) + "...");                })            }        });    }});//判断是否是中文function isCN(str) {    //正则表达式,中文字符     var pattern = /[\u4e00-\u9fa5]/g;    //检测是否中文字符    if (pattern.test(str)) {        return true;    } else {        return false;    }}//获取传入的字符串中有多少个非中文字符function getCountOfNoCNChar(value) {    //    var len = str.length;    //    var c;    //    var count = 0;    //    for (var i = 1; i < len; i++) {    //        c = str.substring(i - 1, i);    //        if (!isCN(c)) {    //            count++;    //        }    //    }    //    return count;    var length = 0;    for (var i = 0; i < value.length; i++) {        if (value.charCodeAt(i) > 127) {            length++;        }    }    return  value.length - length;}function getfixText(str, n) {    var result = str.substring(0, n);    var coutOfNOCN = getCountOfNoCNChar(result);    if (coutOfNOCN > 0) {        return result + getfixText(str.substring(n, str.length - 1), coutOfNOCN / 2);    }    else {        return result;    }}

2.在你的html（aspx，jsp等）页面添加以下引用：

<script src="/Manage/js/jquery.js"><script src="../js/htmlHelp.js" type="text/javascript"></script>

注意：引用该插件前必须引用jquery的核心文件jquery.js，且注意引用的路径。

3.使用的方法

js代码

 <script type="text/javascript">        $(function() {            $.fixTextNO($(".fixTextname"), 12, "100px");            $.fixTextNO("fixTextParentID", 12, "100px")        })    </script>

4.html代码

<td align="center" valign="top" class="fixTextTitle">      <%# Eval("Title")%></td><td align="center" valign="top"  class="fixTextAuthor">      <%# Eval("Author")%></td>