title: How can I dynamically resize a DIV element's width to fit its text content?
body: <p>Let say I have this HTML code snippet:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="textContent"&gt;Text Content Te&lt;/div&gt;
  &lt;div id="anotherText"&gt;Another Text Content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://img26.imageshack.us/img26/1571/beforeeffect.gif" rel="nofollow noreferrer">Original HTML output http://img26.imageshack.us/img26/1571/beforeeffect.gif</a></p>
  
  <p>I wonder how I could dynamically resize the <code>div</code>'s <code>textContent</code> width so that it fits its text content nicely (neither the text will be <em>wrapping</em> nor <em>scrolling</em> nor <em>truncated</em>).</p>
  
  <p><a href="http://img26.imageshack.us/img26/5851/desiredeffect.gif" rel="nofollow noreferrer">Desired HTML output http://img26.imageshack.us/img26/5851/desiredeffect.gif</a></p>
  
  <p>I am open to any solution using CSS and/or JavaScript.</p>