How to adaptively compose one situation?

Question

css

Please take jsfiddle.net/HKrX3/2/ as an example .

The problem is as follows.
Here in the first two divs you see the overflow. In one case, an overflow occurs, in the second, a clipping occurs. In addition, there are methods that allow you to beautifully retouch overflow in translucent ways, as well as do ellipsis through CSS.

And what is desirable.
In the other 3 divs, we see the effect that I would like to get. Its description: in case of overflow, reduce the font, maximum to a certain minimum size, if there are few words, then increase the font to a certain maximum size.

Question:
Are there any CSS methods, or ready-made libs, that allow you to do this kind of thing?

Thank you for your attention.

Answer 1

jsfiddle.net/uwKb8/ wrote such a crutch, in principle it works, but there are many but

Answer 2

The only option that I see is to create a copy of the text somewhere outside the screen and compare the width of the line and the width of the container in which it needs to be entered in a cycle, reducing the font size in each iteration.
I don’t know ready-made solutions, I think that it will not be very difficult to implement this.

Answer 3

The easiest way is to count the number of characters in the text and set the desired class or font size for the block. It's a couple of lines in JS or PHP.