1. 程式人生 > >CSS/JS 限制顯示字元的數量

CSS/JS 限制顯示字元的數量

1、根據HTML標籤的className限制顯示字元   $(".newslimit").each(function(){         var len=$(this).text().length;   //當前HTML物件text的長度         if(len>30){             var str="";             str=$(this).text().substring(0,30)+"......";  //使用字串擷取,獲取前30個字元,多餘的字元使用“......”代替             $(this).html(str);                   //將替換的值賦值給當前物件
        }     }); 2、實踐通用的函式         function limitUploadFileName(name){              var str="";             var len=name.length;             if (len>20){                 str=name.substring(0,14)+"……";             }             else{                 return name;             }             return str;
        } 3、使用css控制(注:僅適用於當前標籤佔據一整行的情況)     #list-item-title_left{
                float: left;
                width: 40px;   //設定其顯示的長度
                overflow: hidden;  //超過其長度之後,自動隱藏其換行的字元
                height: 20px;
                text-overflow: ellipsis;  //屬性規定當文字溢位包含元素時發生的事情(1、clip:修剪文字;
                                                                                                                               2、ellipsis:顯示省略符號來代表被修剪的文字;
                                                                                                                               3、string:使用給定的字串來代表被修剪的文字。)
                word-wrap: break-word;
                word-break: break-all;
                white-space: nowrap;
    } <span id="list-item-title_left">測試新功能測試新功能測試新功能測試新功能測試新功能測試新功能測試新功能</span>