How to set text overflow ellipsis

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/hua_ban_yu/article/details/83022953

In the front-end development, a single line ellipses can be used directly css set, then how to set up multiple lines of text ellipsis it?

If you do not consider the compatibility issues can directly use the following css settings:

overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 3;

But in the development process need to be compatible with all major browsers, but the moment css styles also can not support multi-line set ellipsis, the best way is to use js code to set multiple lines ellipsis. (You can go directly to the download lineEllipsis .js file   https://github.com/lianglijie/lineEllipsis )

Use lineEllipsis set up a multi-line display ellipsis:

$lineEllipsis({
id:objId, //要设置多行省略号标签的id
rows:3 //设置超出多少行后显示省略号，默认为两行
})

Set effect after:

lineEllipsis .js is a pure JavaScript code to set multiple lines of ellipsis, you can download lineEllipsis .js file and then use the $ lineEllipsis () call