Использование эллипсиса переполнения текста в середине элементов списка

Я пытаюсь реализовать 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-й всегда должны быть полностью видимы... но второй должен скрыть то, что не подходит.

Это самое близкое мне (используя два элемента ul, плавающие с 3-го и 4-го элементов с правой стороны), но как только я добавляю 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>

Ответ 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;

}

Демо

Ответ 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')

    })

Ответ 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>

Ответ 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>

Ответ 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;
}

Это должно быть то, что вы ищете:)