Use flex layout in the outer layer, set the number of rows of height, or give the maximum height max-height in the outer layer Place text in p in the inner layer, and display it normally
The idea is to judge based on the row height. Once the row height is greater than 1 row height, it means that there are two rows of content. Here is the code:
To provide an idea, you can set the line-height to 20px, and then after the page is rendered, use the offsetHeight attribute of the node in js, offsetHeight / 20is the number of lines
Use flex layout in the outer layer, set the number of rows of height, or give the maximum height max-height in the outer layer
Place text in p in the inner layer, and display it normally
html structure:
Then judge the height of the two:
At this time, "See more" will be displayed
The idea is to judge based on the row height. Once the row height is greater than 1 row height, it means that there are two rows of content. Here is the code:
html is as follows:
js is as follows:
It’s not easy to code, please like it if you like it~
Then judge the row height
The current text should have a separate dom, get its height and line height and calculate it dynamically
To provide an idea, you can set the line-height to 20px, and then after the page is rendered, use the offsetHeight attribute of the node in js,
offsetHeight / 20
is the number of linesUse
That’s it