title: How to change the width of displayed text nested in a div?
body: <p>Imagine I have the following code (simplified regarding my real context of course):</p>
  
  <pre><code>&lt;div id="box" style="width: 120px;" onmouseover="this.style.width='200px'" onmouseout="this.style.width='120px'"&gt;
      &lt;div&gt;A label&lt;/div&gt;
      &lt;div&gt;Another label&lt;/div&gt;
      &lt;div&gt;Another label, but a longer label&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to achieve is the following:</p>
  
  <p>My div box has a fixed width (<code>120px</code> by default).
  In this configuration, every label nested in the box must be written in a single line.
  If the text is too long, then the overflow must be hidden.</p>
  
  <p>In my example, the third item will be displayed <code>Another label, but a</code> or <code>Another label, but a ...</code>.</p>
  
  <p>When the cursor is entering the div box, the width of the box is modified (for example to <code>200px</code>).
  In this configuration, the labels that were shorten in the first configuration are now displayed in the whole space.</p>
  
  <p>With my code snippet, the third label is displayed in two lines when the box has a <code>120px</code>, and I do not want that...</p>
  
  <p>How can I achieve that?</p>
  
  <p>Note that I would be great if the solution works also for IE6!</p>
  
  <p>Even if I prefer a pure CSS/HTML solution, (simple) Javascript (and <code>jQuery</code>) is allowed!</p>