将省略号添加到表列内的div

Question

在我的代码中，我尝试制作file-wrapper div ellipsify的内容，以使表格的宽度延伸100％到屏幕宽度。

由于file-wrapper div具有指定的像素宽度，我根本无法弄清楚我哪里出错了。

编辑：我现在已经将代码简化为基础知识。

＆＃13;

＆＃13;

table {
 width: 100%; 
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
}