How to change the width of displayed text nested in a div?
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.
Wit开发者_高级运维h 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!
Try putting the following as class on your divs:
white-space:nowrap;
I don't have IE6 here, so I can't this this.
style="white-space:nowrap; overflow:hidden;"
精彩评论