0
<div className="container">
      {text}
</div>

Hi, I'm new in CSS. The text is sent by network request, and it may return a long or short string.

How to make text font resizable when the container has fixed height and width?

When I get a long string, I want font-size a bit smaller but always full with container.

When I get a short string, I want font-size a bit bigger but not overflow.

By the way, I'm using React.

setting
  • 65
  • 1
  • 6
  • Don't use variable font sizes, this will look horrible. Rather use a container that can expand in one direction. Or let the text overflow with an ellipsis. – cloned Sep 09 '21 at 07:44
  • what if the the dynamic text is very lengthy and user can't read that if you go with small font-size? – Mr.7 Sep 09 '21 at 07:46
  • Hi @cloned I can't make it overflow with an ellipsis, because of the component design, the place where the text part is displayed cannot be expanded or swiped to view, so I can only make the font smaller – setting Sep 09 '21 at 07:50
  • 1
    Hi @Mr.7 As far as I know, it won't return that long. Long text will only be 3 to 5 digits longer than short text – setting Sep 09 '21 at 07:55
  • Talk to your designer, so that they can provide a reasonable design with a good User experience. You other solution is to get the text length via JS and adjust the styling based on JS calculations. – cloned Sep 09 '21 at 08:13

0 Answers0