Question

Imagine I have the following code (simplified regarding my real context of course):

<div id="box" style="width: 120px;" onmouseover="this.style.width='200px'" onmouseout="this.style.width='120px'">
    <div>A label</div>
    <div>Another label</div>
    <div>Another label, but a longer label</div>
</div>

What I want to achieve is the following:

My div box has a fixed width (120px 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.

In my example, the third item will be displayed Another label, but a or Another label, but a ....

When the cursor is entering the div box, the width of the box is modified (for example to 200px).
In this configuration, the labels that were shorten in the first configuration are now displayed in the whole space.

With my code snippet, the third label is displayed in two lines when the box has a 120px, and I do not want that…

How can I achieve that?

Note that I would be great if the solution works also for IE6!

Even if I prefer a pure CSS/HTML solution, (simple) Javascript (and jQuery) is allowed!

Answer 1

style=”white-space:nowrap; overflow:hidden;”