Using text-overflow ellipsis in middle of list items

Question

I am trying to implement HTML/CSS where there are four list items (li) within a full-width unordered list element (ul), but am struggling to get one of those items to use the text-overflow:ellipsis command.

The result should be something along these lines...

+-------------------------------------------------------------------------------------------+
| Item One | Item Two Two Two Two Two Two Two Two Two Two Two ...  | Item Three | Item Four |
+-------------------------------------------------------------------------------------------+

The 1st, 3rd and 4th items are to be locked in position - with the 1st item on the left, and the 3rd and 4th items "locked" to the right hand side of the full-width area.

The 2nd item should take all the remaining space, with ... ellipsis on the overflow.

This area will be used within a responsive design, and therefore will expand/shrink depending on the available screen area.

All four of the items will contain variable amounts of text, however the 2nd item will always have the most. So the 1st, 3rd and 4th should always be fully visible... but the 2nd should hide what doesn't fit.

This the the closest I've got (using two ul controls, floating the 3rd and 4th items on the right hand side), but as soon as I add the CSS for the 2nd item, it all goes wrong. (By "wrong", I mean the 2nd item wraps onto the next line rather than staying on the same line and showing the ...)

#leftul {
    width:100%;
}
#rightul {
    float:right;
}
ul {
    margin:0;
    padding:0;
}
li {
    list-style-type:none;
    display:inline-block;
    border:1px solid black;
}
#leftul #leftlarge {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

<ul id="rightul">
    <li>Item Three</li>
    <li>Item Four</li>
</ul>
<ul id="leftul">
    <li>Item One</li>
    <li id="leftlarge">Item Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</li>
</ul>

Can anybody please suggest how this could be possible to acheive?

Answer 1

This code is working fine, try this way

<div class="left">left</div>
<div class="right">right</div>
<div class="right">right</div>
<div class="middle"><div  class="flexible_width1">Item Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</div></div>

Css:

.left{
    background:red;
    min-width:70px;
    float:left;

}
.middle{
    background:yellow;

}
.right{
    float:right;
    min-width:70px;
    background:green
}
.flexible_width1 {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

}

Demo