title: CSS - calc() on font-size - changing font size based on container size
body: <p>I have a situation where I have a container element (<code>div</code>) that contains text. This text will sometimes be really large - not paragraph large, but it can potentially exceed the width of the text.</p>
  
  <p>Obviously, in most situations it will just knock parts of the text to the next line, but I wanted to see if <code>calc()</code> can be used on <code>font-size</code> to change the size of the font to make sure it is always fitting within the bounds of the <code>div</code> it is in. Can this be done?</p>
  
  <pre><code>.name { width: 500px; font-size: 64px; }
  
  &lt;span class="name"&gt;Sometimes it is short&lt;/span&gt;
  
  &lt;span class="name"&gt;Sometimes it is going to be really long, and people put long names&lt;/span&gt;
  </code></pre>
  
  <p>I could just limit the number of letters people can use for a name - and to an extent I will, but I am curious to see if this can even be accomplished.</p>
  
  <p>I found this post to do it with Javascript, but that was a long time ago, and I think CSS3 has a lot of new things that may let this be accomplished without any scripting. <a href="https://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container">AutoFill</a></p>