Sometimes the product has a requirement that you want to give a summary of your article or post, up to 3 lines, or other lines. ‘. Of course, this is pretty easy to do with CSS. But in the case of products requiring more points, I hope to make up ‘… ‘, which is difficult.
I also searched a lot on the Internet, and at least I didn’t find a good solution. I also referred to the information flow of Weibo and Zhihu, and found that they might be calculated according to the number of words, because I didn’t see that the four words’ read the full text ‘were at the end of the last line.
Weibo effect:
Zhihu Effect:
So I also tinkered with some, and finally managed to create a relatively satisfactory small library. The whole idea is to calculate the width of each word to figure out how many lines there are. Because the Web front end still doesn’t have a direct way to figure out how many lines of text there are, this calculation is still a bit cumbersome. The trick is to wrap each word in a line label and calculate the width of the line label.
My own project results:
The project is already on Github and posted on NPM. Just search text-overflow
The project address
The demo address
I hope the students who like it or use it can use it. If you have any questions, you can issue it to me. Also, don’t forget to point star to my project, so THAT I will continue to update.