1.js方法
function cutString(str, len) {
//length屬性讀出來的漢字長度為1
if (str.length * 2 <= len) {
return str;
}
var strlen = 0;
var s = "";
for (var i = 0; i < str.length; i++) {
s = s + str.charAt(i);
if (str.charCodeAt(i) > 128) {
strlen = strlen + 2;
if (strlen >= len) {
return s.substring(0, s.length - 1) + "...";
}
} else {
strlen = strlen + 1;
if (strlen >= len) {
return s.substring(0, s.length - 2) + "...";
}
}
}
return s;
}
2.CSS用法
說明：
clip：修剪文本
ellipsis：顯示省略符號來代表被修剪的文本
string：使用給定的字符串來代表被修剪的文本。
#div1{
overflow: hidden;
text-overflow: ellipsis; //超出部分以省略號顯示
white-space: nowrap;
width: 20px;
}
多行顯示省略號
display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。
text-overflow，可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本 。
#div2{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 可以顯示的行數，超出部分用...表示*/
-webkit-box-orient: vertical;
}
補充：鼠標移上去顯示被省略內容
#div1:hover{
overflow: visible;
text-overflow: inherit;
}