Reducing the size of the text relative to its number — how to act?

Thank you designers for such luck to do nothing at all.

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

How to act? How to think?
Something I'll never know: to compare the height of the parent and of the text and if the text height to reduce the size on the unit until the height is less or equal?
July 2nd 19 at 17:39
3 answers
July 2nd 19 at 17:41
And if you use text-overflow: ellipsis? And if a person wants to the end to read, then Tyco to remove this property and the container changes its height depending on the text. Tipo VC "Read more".
no, the text should be visible
this is the title of 2-4 rows - Durward_Osinski commented on July 2nd 19 at 17:44
then you need to explain to those who will make these headers that need to stay within these limits. The other way is not present) - jordy_Zemlak73 commented on July 2nd 19 at 17:47
July 2nd 19 at 17:43
You can try to use transform: scale().

1. Learn through js the height of the container and block of text. The text while scrolling.
2. Calculate using the proportion of cal. reduction, to align the height of the text block and the container.
3. To apply to the unit text-transform: scale() with a calculated ratio. Then the visible width of a text block inside the container will decrease, margins will appear to the right and left.
4. At the same rate as the increase width of the text block. Then the text will start to occupy fewer lines and under the text there is an empty space.
5. To move some formulas to indent from the bottom was minimal.

Maybe this option will prompt you for a decision. At least he has a fixed number of iterations.
transform: scale() works correctly on most values, the text will be muddy - Durward_Osinski commented on July 2nd 19 at 17:46
July 2nd 19 at 17:45
No need to fantasize in a vacuum.
If the text is not very important - trim with an ellipsis.
If an important block skrollitsya.
All.

Find more questions by tags FrontendjQueryCSSHTMLJavaScript