title: React - Shorten string based on width
body: <p>I have a container with the width: 500px.
  In this container there are 2 strings, &quot;iiiiiiiiiiiiiii&quot; and &quot;MMMMMMMMMMMMMMM&quot;. You can clearly see that the &quot;M&quot; string is a lot wider than the &quot;i&quot; string, but both fit in the 500px screen.
  <a href="https://i.stack.imgur.com/Wdp1b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wdp1b.png" alt="enter image description here" /></a></p>
  <p>If i make the container smaller, lets say 350px the M string is too wide and i want to remove some 'M's so it can fit as so:</p>
  <p><a href="https://i.stack.imgur.com/uxvGi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uxvGi.png" alt="enter image description here" /></a></p>
  <p>In React i have the following data:</p>
  <pre><code>var i = 'iiiiiiiiiiiiiii';
  var M = 'MMMMMMMMMMMMMMM';
  var containerWidth = 500;
  </code></pre>
  <p><strong>Based on what information do I shorten the strings?</strong></p>
  <p>I started out with <code>if string.length &gt; containerWidth / 10</code>, but thats not right because string-length != width. I can't use <code>getElementById</code> and then use <code>.offsetWidth</code></p>