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?
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".
fleta.McLaughl answered on 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.
Evie answered on 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.