將省略號添加到表格列內的div

Question

在我的代碼中，我試圖使file-wrapper div的內容橢圓化，以便表格的寬度可以100％擴展到屏幕寬度。

我根本無法弄清楚我要出錯的地方，因爲file-wrapper div有一個指定的像素寬度。

編輯：我已經簡化了代碼到現在的基礎知識。

table { 
 
width: 100%; 
 
} 
 

 
.file-wrapper { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <div class="file-wrapper"> 
 
     testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

我不能完全肯定，但我懷疑這事做與100%寬度表和border屬性之間的衝突在

<table border="1"> 

見此修改使用寬度98vw而不是100%：

table { 
 
width: 98vw; 
 
} 
 

 
.file-wrapper { 
 
overflow: hidden; 
 
text-overflow: ellipsis; 
 
white-space: nowrap; 
 
width: calc(98vw - 214px); 
 
} 
 

 
.spacer { 
 
width: 10px; 
 
} 
 

 
.icon { 
 
width: 34px; 
 
}

<table border="1"> 
 
    <thead> 
 
     <tr> 
 
      <td class="icon"></td> 
 
      <td class="spacer"></td> 
 
      <td class="file">Description</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td class="icon"></td> 
 
      <td class="spacer"></td> 
 
      <td class="file"> 
 
       <div class="file-wrapper"> 
 
        testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

使用下面簡單的CSS

.file-wrapper{ 
    width: 60px;/* Change as per requirement*/ 
  text-overflow: ellipsis !important; 
  overflow: hidden !important; 
  white-space: nowrap; 
}