制作对标签内的字符数进行限制的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>