js控制文本超长显示

 

 

方式一：

li {
 width:200px;
 white-space:nowrap;
 text-overflow:ellipsis;
 -o-text-overflow:ellipsis;
 overflow: hidden;
 }


<ul>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a><>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a><>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a><>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a><>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a><>
</ul>

方式二：

 

$(function(){

            var spaceStr="<lable>";
            $(".acont").each(function(){
                var maxwidth=15;
                var title=$(this).text();
                var titleWordNum=0;
            //获取字符串的字节数（一个汉字两个字节，一个英文、空格、数字一个字节）
                for(var x=0;x<title.length;x++){
                    if(title.charCodeAt(x)<=255){           //中文的asscii码大于255
                        titleWordNum+=1;

                    }else{
                        titleWordNum+=2;
                    }
                }

                if(titleWordNum>maxwidth*2){
                //字符串的字节数大于指定的长度就截取指定长度的字符串，
//此时存在另一个问题：如果截取出来的字符串中存在英文，则需要再
//断一遍，填充缺少的空格
                    var titleSub=$(this).text().substring(0, maxwidth+1);
                    var titleSubWordEng=0;
                    for(var y=0;y<titleSub.length;y++){
                        if(titleSub.charCodeAt(y)<=255){
                            titleSubWordEng+=1;

                        }
                    }
                    if(titleSubWordEng>0){
                        var tempSpaceStr="<lable>";
                        for( var z=0;z<titleSubWordEng;z++){
                            tempSpaceStr+="&nbsp;"
                        }
                        tempSpaceStr+="</lable>";

                    $(this).html($(this).text().substring(0,maxwidth+1)+"..."+tempSpaceStr)
                    }else{
                        $(this).html($(this).text().substring(0, maxwidth+1)+"...")
                    }
                }else{
                //字符串的字节数小于指定的长度，则用空格填充
                    var titleLength=$(this).text().length;
                    for(var i=0;i<35-titleWordNum;i++){
                        spaceStr+="&nbsp;"
                    }
                    spaceStr+="</lable>"
                    $(this).html($(this).text()+spaceStr)
                    spaceStr="<lable>";
                }
                titleWordNum=0;
            })
})