无法使用显示的省略号工作：table-cell

Question

我有一个用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>

表1是当前的CSS我;表2是它应该如何。

这个问题似乎是缺乏物品的div宽度的定义，应该尊重table-cell容器。我不知道如何解决这个问题。如何改进.item-desc以使省略号工作并保持列的原始宽度？

Answer 1

使用table-layout: fixed为table - 见下面的演示：

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