How to size a dynamic text based a full width div

Question

I'm trying to scale text based on the parent div. I'm using reactjs and I've tried to use the react-textfit package, but the font size is defined in pixels making it not responsive.

Remembering that the texts are dynamic. I don't know how many letters each will have

I make this example in https://jsfiddle.net/2hsz16q8/6/

here i did it using a second class but, i would like to do this dynamically.

HTML:

<ul>
 <li>
  <div>
   <h1 id="dynamic-text-1">Why do we use it?</h1>
  </div>
 </li>
 <li>
  <div>
   <h1 id="dynamic-text-2">Where does it come from?</h1>
  </div>
 </li>
</ul>

CSS:

#dynamic-text-1 {
  font-size: 4em;
}

#dynamic-text-2 {
  font-size: 2.9em;
}

div {
  border: 1px solid red;
  width: 70vw;
}

Possible duplicate of https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — palaѕн, Mar 28 '20 at 05:16
@palash i don't think so. I am try to size dynamic a text based on a div, and not only makes it responsive — kelvin sand, Mar 28 '20 at 05:30

score 0 · Answer 1 · answered Mar 30 '20 at 06:57

You could use vw for font-size instead of em, rem, % or px. This way the font will change depending on the browser width and it will not be relative to the browser rather it will be relative to the screen size.

HTML

<ul>
  <li>
    <div>
      <h1 id="text-2">Why do we use it?</h1>
    </div>
  </li>
  <li>
    <div>
      <h1 id="text-1">Where does it come from?</h1>
    </div>
  </li>
</ul>

CSS

h1 {
  font-size: 2vw;
}

div {
  border: 1px solid red;
  width: 70vw;
}

Note that you should use this only with media queries otherwise the text will scaleup on the large screens.

How to size a dynamic text based a full width div

1 Answers1