CODEWITHSUNDEEP
javascriptcssreactjsfont-size
Jesse Winton
Jesse Winton

Reputation: 696

React - dynamic font size to take all available space

I'm trying to create a layout like this in my Next.js project:

enter image description here

There will be a word, an image in between, and then another word, like above. I need to dynamically set the font size in order to take all available space. How can I do this?

Upvotes: 3

Views: 3444

Answers (2)

Eric Chou
Eric Chou

Reputation: 97

There is an article that show lots of methods to do that.

https://css-tricks.com/fitting-text-to-a-container/

Libraries you can take a look:

react-scale-text

fitty

react-fitty

textFit

react-textfit

auto-text-size

Upvotes: 1

heyitsvajid
heyitsvajid

Reputation: 1121

textFit It’s JavaScript library that adjusts font sizes to fit text into a container.

fitty is another JS library resizes type to maximize just horizontally

You can find more options here and go with the one suits you best. Link

Upvotes: 4

Related Questions