如何将数据长度限制为单元格宽度？

Question

我有一个网格，有时描述的数据大于单元格的宽度，然后将其包装，所以我不希望发生这种情况，我只想在单元格中显示足够的数据并在末尾添加省略号数据并添加工具提示以显示其余数据，我可以自己弄清楚，只是不确定如何将数据限制为像元宽度。有问题的列是200px

这是目前的样子

这就是我想要的样子

Answer 1

要获得预期结果，请使用以下选项，使用最大宽度和文本溢出：省略号

table tr td{
  border: 1px solid black;
}

td{
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
  <tr>
    <th>Col1</th>
    <th>Col2</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Custom size wall corner single entry</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

文本溢出仅适用于块级元素，因此要使其适用于表单元格，请添加最大宽度以应用省略号（td默认为 display：table-cell ）

根据MDN，文本溢出属性仅影响溢出到块容器元素中的内容-https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

codepen-https://codepen.io/nagasai/pen/RmmmKK

Answer 2

签出此项：https://css-tricks.com/almanac/properties/t/text-overflow/

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

.cell {
  max-width: 200px:
}

<td class="cell ellipsis">
  text inside cell
</td>