在列表项的中间使用文本溢出省略号

Question

我正在尝试实现HTML/CSS,其中li在全宽度无序列表元素(ul)中有四个列表项(),但我很难获得其中一个项目来使用该text-overflow:ellipsis命令.

结果应该是这样的......

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

第1,第3和第4项目将被锁定在位置 - 左侧第1项,第3项和第4项"锁定"在全宽区域的右侧.

第二项应该占用所有剩余空间,...溢出上有省略号.

该区域将在响应式设计中使用,因此将根据可用的屏幕区域进行扩展/缩小.

所有四个项目都包含可变数量的文本,但第二个项目将始终拥有最多.因此,第1,第3和第4应始终完全可见......但第2应该隐藏不适合的东西.

这是我最接近的(使用两个ul控件,浮动右侧的第3和第4项),但是只要我为第2项添加CSS,一切都会出错.("错误",我的意思是第二项包裹在下一行而不是停留在同一行并显示...)

#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>

任何人都可以建议如何实现这一目标？

Answer 1

这段代码工作正常,试试这种方式

<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;

}

演示