Использование эллипсиса переполнения текста в середине элементов списка
Я пытаюсь реализовать 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;
}
Это должно быть то, что вы ищете:)
