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

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

我根本無法弄清楚我要出錯的地方，因爲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>

來源

2016-11-14 Daniel Williams

它看起來像它在做什麼你描述。問題是什麼？ – TylerH

其他TD不保持其寬度。如果您調整瀏覽器的大小，則內容不會保持橢圓。無論您的瀏覽器寬度如何，表格都應100％可見。 –

寬度：calc（100％ - 214px）在你的情況下沒有意義，因爲它告訴「讓div 100％ - 214px爲單元格的大小」，爲了適應所有的單元格，默認跨越單元格本身內容和省略號將永遠不會顯示。在你的情況下，你需要修復td的寬度以使其工作。 –

我不能完全肯定，但我懷疑這事做與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>

來源

2016-11-14 23:51:19 Rounin

邊框僅用於查看空單元格的寬度。正如@Eduard Malakhov上面提到的，我已經知道div的固定寬度是錯誤的，因爲它正在查看其父TD的100％，而不是表。 –

使用下面簡單的CSS

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

來源

2016-11-15 04:28:34

問題是我沒有指定固定寬度。 div的寬度取決於瀏覽器的寬度。 –

使寬度自動並設置最大寬度。 –

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

回答

相關問題