Multi-line text-overflow: ellipsis ellipsis failure problem

question:

If the multi-line text is set to exceed the style of displaying the ellipsis, the ellipsis will not take effect, and I have been tossing about it for a long time. . .

The css is as follows:

HTML code structure:

But it has no effect. Although the ellipsis is displayed on the eighth line, there is still text behind it.

solve:

The problem is that when setting multi-line text to display ellipsis, you can only specify the number of lines displayed, and the height of the nearest node cannot be set! ! !

Neither the fixed height px nor the relative height vh, rem will work, as long as there is a height, it will look like the above.

1. Generally, the text is wrapped with span or p, the parent node sets the height, and the child node (span/p) sets the style (ellipsis) related code

text-overflow: ellipsis; 
overflow: hidden; 
display: -webkit-box; //Special display mode 
-webkit-line-clamp: 8; //Number of lines 
-webkit-box-orient: vertical; //The content in the box is vertical Alignment

2. The parent element is an element with valid width, and set the necessary width.

• The width and height attributes of block level elements are valid by default.
• The width and height attributes of inline elements (some people also call them inline elements) are invalid.
• The width and height attributes can be made valid by changing the display. Such as: add display: block;

Modified code:

Effect:

Please correct me!