How to shrink and adapt text when it doesn't fit in a block?

Question

css

There is a block. It is filled with text on certain events. But with a large amount of text, it goes beyond the border and obscures the block that is nearby.
How to make text responsive? So that its size decreases when the div overflows?

Answer 1

I think you can use vh. For example:

.some-text {
    font-size: 100vh;
    line-height: 100vh;
}

Here is an article on habré

Answer 2

Example:
codepen.io/iiil/pen/yDbtL
When adding text, call the scale function. The step and minfs variables are the font size change step and the minimum font size. When the minimum is reached, a vertical scroll appears.

Answer 3

Surrenders to me that the task is incorrect from the very beginning. What was wrong with scrolling?

Answer 4

function onTextChange() {
    var textLength = $('.textHolder').text().length;
    var fontSize = Math.min(12, (1000 / textLength) * 12); 
    //where 12 - typical font-size, 1000 - typical length
    $('.textHolder').css('font-size', fontSize+'px');
{

This is with jQuery. On vanilla js you can rewrite it yourself.

Answer 5

Is this option not suitable?
htmlbook.ru/css/text-overflow

Answer 6

Responsive layout, how to change the font size when changing the block size?