angular.js - angular content is too long, expand and collapse effect

Question

The content in 1.p is too long. When the content is too long and exceeds the display of two lines, a [Show] tag will appear. After expansion, a [Collapse] tag will appear at the end of the content, similar to what QQ Space said. It is said that the full text will be displayed when it is long, and it can be folded when it is finished. I cannot judge the length of the content, and the number of Chinese and English characters displayed in one line is not equal. I would like to have an example with complete effects.

Answer 1

Let me give you an idea. In HTML, add an inline-block (your expansion and closing) after the text. The css setting is fixed high, and overflow:hidden is exceeded. js determines the height, and adds a class to the outermost layer after exceeding it. This class controls your expansion and closing, and also clears the fixed height and overflow: hidden. Of course, if it is responsive, you have to think of another way.

Answer 2

angular filter

Answer 3

Use line-height to specify the height, and use this height to achieve folding and stretching