製作對標籤內的字符數進行限制的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>