css/js 超出部分顯示省略號

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;

}