A single line of text
.box { width: 200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
Second, multi-line text
1. csss implemented for webkit core browser, a mobile terminal, micro-channel may not Firefox
.box {
width: 200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
2. js achieve for all browsers, the principle is the interception of a specified number of words of text
vue item filter for:
Filters: {
// ... handle multiple lines of text
// example {{text | ellipsis (35) }} 35 to limit the number of words
ellipsis (text, NUM) {
IF (text.length> NUM) {
return text.substring ( 0, NUM) + '...';
} the else {
return text;
}
},
}
jq items:
// display the text exceeds ...
// example ellipsis ( 'Box.', 86);
function ellipsis (Box, NUM) {
$ (Box) .each (function () {
IF ($ (the this) .text () .length> NUM) {
. $ (the this) .text ($ (the this) .text () the substring (0, NUM) + '...');
}
});
}