search

ByteGrad / Professional-React-and-Next.js-Course

This repo contains everything you need as a student of the Professional React & Next.js Course by ByteGrad.com
https://bytegrad.com/courses/professional-react-nextjs
111 stars 58 forks source link

Fancy Counter : How to make the font size dynamic to the length of the text content inside ? #2

Open madhavanand-github opened 7 months ago

madhavanand-github commented 7 months ago

I searched for couple of solutions, but still didn't answer the quest.

  1. clamp property, but I see that makes responsive to viewport.
  2. Pure CSS to make font-size responsive based on dynamic amount of characters
  3. Dynamically change the size of the font size based on text length
  4. This is pretty close solution Codepen
  5. Also tried, ChatGPT, Bard, Claude, all stuck with clamp & viewport.

Any pure css solution or other work around.

image