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;
}