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;

}