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项＆＃34;锁定＆＃34;在全宽区域的右侧。

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

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

所有四个项目将包含可变数量的文本，但第二个项目将始终拥有最多。因此，第一，第三和第四应始终完全可见......但第二应该隐藏不适合的内容。

这是我最接近的（使用两个ul控件，浮动右侧的第3和第4项），但是只要我为第2项添加CSS，它就会一切都搞错了。（通过＆＃34;错误＆＃34;，我的意思是第二个项目包含在下一行而不是停留在同一行并显示...）

＆＃13;

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

＆＃13;

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

＆＃13;

有人可以建议如何实现这一目标吗？

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设置为元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

应该是你要找的东西：）

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

5 个答案: