[ad_1]
I have a variable windows size and an header with 3 floating blocks.
The first is floating to right with fixed width, the second is floating left with fixed width. The last (varleft) is floating left with variable length content.
<div id="header">
<div id="right">test</div>
<div id="left">test</div>
<div id="varleft">very long text very long text very long text very long text very long text very long text very long text very long text very long text </div>
</div>
I want to prevent this third block to go under other blocks while it grows in its width, moreover, I want to give it a second line for long content, and then truncate string with ellipsis.
These blocks are block of bootstrap nav-header so I cannot use other but floats to move them.
This is a text example for growing text:
https://jsfiddle.net/mjq2tum0/
This is the result I wish (excepting for fixed width and one-line ellipsis):
https://jsfiddle.net/o90sm39L/
[ad_2]
لینک منبع
