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

Question

我正在尝试实现 HTML/CSS，其中在全宽无序列表元素 (ul) 中有四个列表项 (li)，但我正在努力让其中一项使用 @987654323 @ 命令。

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

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

第 1、第 3 和第 4 个项目要锁定到位 - 第 1 个项目在左侧，第 3 和第 4 个项目“锁定”在全宽区域的右侧。

第二项应该占据所有剩余空间，... 省略号在溢出处。

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

所有四个项目将包含可变数量的文本，但第二个项目总是最多的。所以第一个、第三个和第四个应该总是完全可见的......但第二个应该隐藏不适合的东西。

这是我得到的最接近的（使用两个ul 控件，将第三项和第四项浮动在右侧），但是一旦我为第二项添加 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;

}

Demo

Answer 2

将此代码与 j 查询一起使用

#table {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

        #table > div {
            display: table-cell;
        }

            #table > div:first-child {
                display: inline-block;
                background: red;
            }

            #table > div:nth-child(2) {
                width: 100%;
                background: yellow;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            #table > div:nth-child(3) {
                display: inline-block;
                background: aqua;
            }

            #table > div:nth-child(4) {
                display: inline-block;
                background: lightgray;
            }

HTML

<div id="table">
    <div>first</div>
    <div>second second second second second second second second </div>
    <div>third</div>
    <div>fourth</div>
</div>

jQuery

$(document).ready(function () {
        var first_row = $('#table>div:first-child').width();
        $('#table>div:first-child').css('width', first_row + 'px')
        $('#table>div:first-child').css('display', 'table-cell')

        var first_row1 = $('#table>div:nth-child(3)').width();
        $('#table>div:nth-child(3)').css('width', first_row1 + 'px')
        $('#table>div:nth-child(3)').css('display', 'table-cell')

        var first_row2 = $('#table>div:nth-child(4)').width();
        $('#table>div:nth-child(4)').css('width', first_row2 + 'px')
        $('#table>div:nth-child(4)').css('display', 'table-cell')

    })

Answer 3

您必须将width 设置为元素。

#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;
    width:40%;
}

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

如果locked 的意思是元素将具有fixed 宽度，那么您可以使用display:table/table-cell 来实现：

body{margin: 0}

#table{
    display:table;
    width:100%;
    table-layout: fixed;
}

#table>div{
    display:table-cell;
}

#table>div:first-child{
    width: 100px;
    background:red;
}

#table>div:nth-child(2){
    width: 100p%;
    background:yellow;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#table>div:nth-child(3){
    width: 100px;
    background:aqua;
}

#table>div:nth-child(4){
    width: 100px;
    background:lightgray;
}

<div id="table">
    <div>first</div>
    <div>second second second second second second second second </div>
    <div>third</div>
    <div>fourth</div>
</div>

第二个单元格总是占据剩余的全部宽度。

Check the fiddle to se on responsive

Answer 5

也许这可以帮助你：jsFiddle

<div id="navcontainer">
    <ul>
        <li>Item One</li>
        <li>Item Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
    </ul>
</div>

#navcontainer ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
}

#navcontainer ul li 
{ 
    display: inline-block;
    border:1px solid black; 

    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

这应该是你要找的:)