Reducing the size of the text relative to its amount - how to proceed?

Question

css

Thanks to the designers for such luck to do complete nonsense.

Task. There is a block of dynamic text (it can be of different sizes). The block itself has a fixed height.
The text may not intervene - problemes.
I decided that it is necessary to adjust the size of the text if it does not fit in the height of the parent.

How to act? How to think?
I can’t imagine something: compare the height of the parent and the text and, if the height of the text is greater, reduce its size by one until the height becomes less or equal?

Answer 1

And if you zayuzat text-overflow: ellipsis? And if a person wants to read to the end, then at random remove this property and the container changes its height depending on the text. Like in VK "Read more".

Answer 2

You can try using transform: scale().
1. Find out the height of the container and block of text through js. Text while scrolling.
2. Calculate through the proportion of the coefficient. decrement to match the height of the text block and the container.
3. Apply to the block with the text transform: scale() with the calculated coefficient. Then the visible width of the text block inside the container will decrease, margins will appear on the right and left.
4. Increase the width of the text block by the same factor. Then the text will begin to take up fewer lines and an empty space will appear under the text.
5. Chemistry with the formulas so that the indent from the bottom is minimal.
Maybe this option will lead you to a solution. At least it has a fixed number of iterations.

Answer 3

You don't have to fantasize.
If the text is not very important - cut off with an ellipsis.
If it is important, the block will scroll.
Everything.