在使用省略号文本溢出样式时如何减小表列的宽度？

Question

我有一个填充的表，该表具有css列样式，这会导致溢出的文本为ellipsed（以...缩写）。

td的css样式如下：

text-overflow: ellipsis;
overflow: hidden;
max-width: 0;
white-space: nowrap;

这有效，但是它过早地省略了文本。有些列的未用空白空间的宽度比其他带有省略号文本的列的宽度大。当我将最大宽度指定为f.e. 15vw不再发生此问题，但这会导致其他不需要的问题。

在将这种省略号样式用于溢出文本时，还有另一种方法来减小此类表列的宽度吗？

Answer 1

像下面这样使用

table.table-ellipsis{
  width: 500px;
}
table.table-ellipsis td{
border: 1px solid #ccc;
width: 25%;
  max-width: 100px;
  position: relative;
}

table.table-ellipsis td div{
  display:block;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

<table class="table-ellipsis">
<tr> 
<td> <div> Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet   Lorem Ipsum Dolor Sit amet </div> </td>
<td> <div> Lorem Ipsum Do</div> </td>
<td> <div> Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet   Lorem Ipsum Dolor Sit amet </div> </td>
<td> <div> Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet   Lorem Ipsum Dolor Sit amet </div> </td>
</tr>
<tr> 
<td> <div> Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet   Lorem Ipsum Dolor Sit amet </div> </td>
<td> <div> Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet   Lorem Ipsum Dolor Sit amet </div> </td>
<td> <div> Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet  Lorem Ipsum Dolor Sit amet   Lorem Ipsum Dolor Sit amet </div> </td>
<td> <div> Lorem Ipsum Dol</div> </td>
</tr>

</table>