Scaled text size in css - html

Question

I have a static width div element (400px), I want this div to hold any kind of text, no mater how short or long it could be.
This text comes from the user, so I have no-way to determine what length it could hold.
I want the text to fit in the box.
to fit means to fit.
So, this means that the text will adjust its font size based on its parent,
if there were few words, the text will be with big font-size, while if the text has too many words, then it will become smaller and smaller and smaller until it fits inside the box,
think of this picture, for example:
The more words you add, the smaller the text becomes.
Is it possible with pure css?
No_jQuery

Answer 1

I got a solution without jquery.
This is in pure JS.
Think you can convert this to react yourself or just use it in pure JS.
Hope this helps! :)
function resize_to_fit(container) {
const output = container.getElementsByClassName("output")[0];
let fontSize = window.getComputedStyle(output).fontSize;
output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
if(output.clientHeight >= container.clientHeight){
resize_to_fit(container);
}
}
function processInput(container) {
const output = container.getElementsByClassName("output")[0];
output.style.fontSize = '100px'; // Default font size
resize_to_fit(container);
}
document.querySelectorAll('.container').forEach(function(container) {
processInput(container);
});
<div id="outer" class="container"
style="width:80%; height:100px; border:2px solid black; font-size:20px;">
<div class="output" style="word-break: break-all; word-wrap: break-word;">
this is a small text
</div>
</div>
<br/>
<div id="outer2" class="container"
style="width:80%; height:100px; border:2px solid black; font-size:20px;">
<div class="output" style="word-break: break-all; word-wrap: break-word;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>