title: How to: Reduce font-size if a line breaks
body: <p>I have a span inside of a div and the div must remain 200px wide and the text must fit on one line within the div. The text within the span is dynamically generated so I can't possibly know which content will break to a new line and which will not.</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"&gt;
    &lt;span style="font-size:12px;"&gt;This sentence is too large to fit within the div.&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I use the CSS property <code>white-space:nowrap;</code> the words will spill to the outside of the div, which of course, we don't want.</p>
  
  <p>How would I reduce the font-size (or zoom) based on if the line breaks or not? I would prefer a CSS answer, but I understand if that is outside of CSS's abilities.</p>