無法使用顯示的省略號工作：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>