在我的代码中,我尝试将 file-wrapper
div 的内容省略,以便表格的宽度拉伸(stretch) 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>
最佳答案
我不是很确定,但我怀疑这与表格的 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>
关于css - 将省略号添加到表列内的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40599565/