title: Checking a text element's width (based on font-size) against its parent container
body: <p>I come to you with a tricky question:</p>
  
  <p>Imagine you have the following basic structure:</p>
  
  <pre><code>&lt;div&gt;&lt;p&gt;hello&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now assume that div has <code>display:block; and width:200px;</code>.
  Using javascript, how would you check what font-size gives you a 'hello' as big as possible without horizontal overflow (in the case of one word) or jumping to a 2nd line in case of a sentence or group of words?</p>
  
  <p>I can't think of a way to measure the space occupied by text so that it can then be checked against that of the parent container, let alone checking if an element is overflowing or linejumping.</p>
  
  <p>If there is a way, I'm sure this is the right place to ask.</p>