Scaled text size in css

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

see https://stackoverflow.com/questions/16056591/font-scaling-based-on-size-of-container — ACarter, Jan 25 '23 at 10:49
take a look to clamp css function or searching css tipografy responsvie — Sfili_81, Jan 25 '23 at 10:52
_"Is it possible with pure css?"_ - no, not really. CSS doesn't know about how "long" your element content is. — CBroe, Jan 25 '23 at 10:52
@Sfili_81 clamp cuts off after x lines of text, that's not what was asked for here. — CBroe, Jan 25 '23 at 10:53
Does this answer your question? [Font scaling based on size of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-size-of-container) — Andy, Jan 25 '23 at 10:57
@Andy, actually, I am reading this thread, thanks ACarter, but all the answers seems quite complicated, wouldn't it be nice if there is a straightforward answer to this? — Normal, Jan 25 '23 at 10:58
@CBroe but you can use it with some math to render a font size [responsive](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/) — Sfili_81, Jan 25 '23 at 11:10
@Sfili_81 sorry, my bad, I got it confused with `line-clamp` to begin with here :-) Yes, `clamp()` can be used to get the font size to behave kind of "dynamic" - but not in a way that takes the actual length of the text into account. — CBroe, Jan 25 '23 at 11:22
@CBroe, Hey guys sorry for disturbing, so this `line-climp` is the way to go? — Normal, Jan 25 '23 at 11:29
No, it is not. All that does is reduce a longer text to a given number of lines, and cut off the rest. — CBroe, Jan 25 '23 at 11:30
Is it possible for you to use jQuery or does it really need to be css only? — Webdeveloper_Jelle, Jan 25 '23 at 13:20
@Jbadminton I can live with vanilla javascript but not Jquery because I'm using react — Normal, Jan 25 '23 at 13:26

score 1 · Answer 1 · answered Jan 25 '23 at 13:43

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>

Scaled text size in css

1 Answers1