title: Pure CSS to make font-size responsive based on dynamic amount of characters
body: <p>I know that this could be solved fairly easily with Javascript, but I'm only interested in a pure CSS solution. </p>
  
  <p>I want a way to dynamically resize text so that it always fits into a fixed div. Here is the sample markup:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width: 200px; height: 1em; overflow: hidden;"&gt;
    &lt;p&gt;Some sample dynamic amount of text here&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I was thinking that maybe this could be possible by specifying the width of the container in ems, and getting the font-size to inherit that value?</p>