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

【问题标题】：Adding ellipsis to divs inside table columns将省略号添加到表列内的 div
【发布时间】：2016-11-15 12:28:34
【问题描述】：

在我的代码中，我试图使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>

【问题讨论】：

看起来它正在做你所描述的事情。有什么问题？
其他 TD 没有保持它们的宽度。如果您调整浏览器的大小，内容不会一直省略。无论您的浏览器宽度如何，该表格都应 100% 可见。
width: calc(100% - 214px) 在你的情况下没有意义，因为它告诉“使 div 100% - 214px 成为单元格的大小”，默认情况下破坏单元格本身 spans为了适合其所有内容，省略号将永远不会显示。在您的情况下，您需要修复 td 的宽度才能使其正常工作。
是的，你是对的。

标签： css

【解决方案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>

【讨论】：

边框只是为了看空单元格的宽度。正如上面提到的@Eduard Malakhov，我将 div 的固定宽度弄错了，因为它正在查看其父 TD 的 100%，而不是表格。

【解决方案2】：

使用下面的简单css

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

【讨论】：

问题是我没有指定一个固定的宽度。 div的宽度取决于浏览器的宽度。
自动设置宽度并设置最大宽度。