无法使省略号与显示一起使用:table-cell
Can't make ellipsis work with display: table-cell
我有一个用 css display: table
制作的布局。它只有两列。其中一列包含 ul
元素。 li
的元素基本上是带有标题行和描述行的搜索结果项。我想在描述行上应用省略号以将其保留在一行中,因此它的文本在溢出时不会影响整个列的宽度:
左边是长文本;就该这样才对。
现在,当我尝试应用省略号(包括 white-space: nowrap
)时,文本弄乱了列的宽度,使其适合文本宽度,但省略号没有显示。
.table { display: table; width: 100%; border: 1px solid #f00; margin-bottom: 20px }
.table-row { display: table-row }
.table-cell { display: table-cell; }
.table-cell:first-child { width: 30%; }
.table-cell ul { padding: 0; margin: 0 }
.table-cell ul li { list-style: none; }
.item { border: 1px solid #000; }
.item-desc {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
Table 1 - The issue
<div class="table">
<div class="table-row">
<div class="table-cell">
<ul>
<li>
<div class="item">
<div class="item-name">Item 1</div>
<div class="item-desc">
Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1
Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1
Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1
</div>
</div>
</li>
</ul>
</div>
<div class="table-cell">Nothing here</div>
</div>
</div>
Table 2 - How it should work
<div class="table">
<div class="table-row">
<div class="table-cell">
<ul>
<li>
<div class="item">
<div class="item-name">Item 1</div>
<div class="item-desc">
Item 1 Item 1 Item 1 Item...
</div>
</div>
</li>
</ul>
</div>
<div class="table-cell">Nothing here</div>
</div>
</div>
Table 1是我得到的当前css; Table2是应该的。
问题似乎是缺少项目 div 宽度的定义,这应该符合 table-cell
容器。我不知道该怎么做。如何改进 .item-desc
使省略号起作用并保持列的原始宽度?
对 table
使用 table-layout: fixed
- 请参阅下面的演示:
.table {
display: table;
width: 100%;
border: 1px solid #f00;
margin-bottom: 20px;
table-layout: fixed; /* ADDED THIS */
}
.table-row {
display: table-row
}
.table-cell {
display: table-cell;
}
.table-cell:first-child {
width: 30%;
}
.table-cell ul {
padding: 0;
margin: 0
}
.table-cell ul li {
list-style: none;
}
.item {
border: 1px solid #000;
}
.item-desc {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="table">
<div class="table-row">
<div class="table-cell">
<ul>
<li>
<div class="item">
<div class="item-name">Item 1</div>
<div class="item-desc">
Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1
</div>
</div>
</li>
</ul>
</div>
<div class="table-cell">Nothing here</div>
</div>
</div>
我有一个用 css display: table
制作的布局。它只有两列。其中一列包含 ul
元素。 li
的元素基本上是带有标题行和描述行的搜索结果项。我想在描述行上应用省略号以将其保留在一行中,因此它的文本在溢出时不会影响整个列的宽度:
左边是长文本;就该这样才对。
现在,当我尝试应用省略号(包括 white-space: nowrap
)时,文本弄乱了列的宽度,使其适合文本宽度,但省略号没有显示。
.table { display: table; width: 100%; border: 1px solid #f00; margin-bottom: 20px }
.table-row { display: table-row }
.table-cell { display: table-cell; }
.table-cell:first-child { width: 30%; }
.table-cell ul { padding: 0; margin: 0 }
.table-cell ul li { list-style: none; }
.item { border: 1px solid #000; }
.item-desc {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
Table 1 - The issue
<div class="table">
<div class="table-row">
<div class="table-cell">
<ul>
<li>
<div class="item">
<div class="item-name">Item 1</div>
<div class="item-desc">
Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1
Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1
Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1
</div>
</div>
</li>
</ul>
</div>
<div class="table-cell">Nothing here</div>
</div>
</div>
Table 2 - How it should work
<div class="table">
<div class="table-row">
<div class="table-cell">
<ul>
<li>
<div class="item">
<div class="item-name">Item 1</div>
<div class="item-desc">
Item 1 Item 1 Item 1 Item...
</div>
</div>
</li>
</ul>
</div>
<div class="table-cell">Nothing here</div>
</div>
</div>
Table 1是我得到的当前css; Table2是应该的。
问题似乎是缺少项目 div 宽度的定义,这应该符合 table-cell
容器。我不知道该怎么做。如何改进 .item-desc
使省略号起作用并保持列的原始宽度?
对 table
使用 table-layout: fixed
- 请参阅下面的演示:
.table {
display: table;
width: 100%;
border: 1px solid #f00;
margin-bottom: 20px;
table-layout: fixed; /* ADDED THIS */
}
.table-row {
display: table-row
}
.table-cell {
display: table-cell;
}
.table-cell:first-child {
width: 30%;
}
.table-cell ul {
padding: 0;
margin: 0
}
.table-cell ul li {
list-style: none;
}
.item {
border: 1px solid #000;
}
.item-desc {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="table">
<div class="table-row">
<div class="table-cell">
<ul>
<li>
<div class="item">
<div class="item-name">Item 1</div>
<div class="item-desc">
Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1
</div>
</div>
</li>
</ul>
</div>
<div class="table-cell">Nothing here</div>
</div>
</div>