How to make a more detailed button that will expand the block?

Question

css

The task is this: There is a block, you need to make it fit, for example, 4 lines. If there are more lines, it is necessary that the "more details" button appear, when pressed, the rest of the text appears. The text should go out, and the button changed the text, for example, to "hide". How to implement this?

Answer 1

For the text, set the desired height max-height , hide the excess - set overflow: hidden. When the button is pressed, set the max-height of the text to 999px (for example). This can be done using JS, for example, or purely on css using the input checkbox.
PS Well, for beauty, add a transition.