React/Javascript

I have a div* it contains a paragraph. This is a question box so it can be longer or shorter. I would like to resolve if this paragraph is longer (number of text)then scale down the font size in order to the text fits in div. If the paragraph is shorter scale up the font size.

-font size clamp is not the best way. I tried using the Scaletext, but i could not resolve. (i think it can not be used for my problem)

*the parent div has max width and height and responsive

CodePudding user response：

If understand your question correctly you want to adjust the font size based on the screen width.

If that's the case - Have you tried to use the 'resize' javascript event and then scale up the font-size based on the innerWidth of that parent element?

Probably this would do the trick.

Reference to MDN Docs - resize event

CodePudding user response：

maybe you can use "vw" - A unit of measure equal to a percentage of the width of the document

div{ font-size: 10vw; white-space: nowrap; }