1.js method
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 usage
Description:
clip: trim text
ellipsis: display symbols to represent omitted pruned text
string: the use of a given string to represent manicured text.
# {Div1
overflow: hidden;
text-overflow: ellipsis; // show excess ellipsis
white-space: nowrap;
width: 20px;
}
Multi-line display ellipsis
display: -webkit-box; have binding properties, as the elastically stretchable object model display box.
-webkit-box-orient the necessary binding properties, set or retrieve a telescopic arrangement of the object sub-element cassette.
text-overflow, can be used in the case of multiple lines of text, with ellipsis "..." hidden text out of range.
Div2 {#
overflow: hidden;
text-overflow: ellipsis;
the display: -webkit-Box;
-webkit-Line-CLAMP: 2; / * number of lines that can be displayed, the excess represented by ... * /
-webkit-Box an -orient: Vertical;
}
added: hover displaying the contents omitted
#div1:hover{
overflow: visible;
text-overflow: inherit;
}