如何截断固定宽度表格单元格中的文本？

Question

我有一个包含 3 个表格单元格的表格。我的目标是为每个设置固定的宽度。如果 td 太长，中间的 td 也应该剪切文本，如果文本太长，则显示点。 （文本截断）

我尝试了不同的可能性（表固定、最大宽度等），但它仍然不起作用。也许有人可以帮助我。

/* table styles added by community for demonstration */
table {
  table-layout: fixed;
  width: 100%;
  border: 1px solid #ccc;
}

td:nth-child(2) {
  background: pink;
}

.cut-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<table>
  <td style="width: 10%">XXX</td>
  <td style="width: 70%" class="cut-text">LOOOOOOOONG TEXT LOOOOOOOONG TEXT LOOOOOOOONG TEXT LOOOOOOOONG TEXT LOOOOOOOONG TEXT </td>
  <td style="width: 20%">XXX</td>
</table>

普通表格如下所示：

如果中间的文本太长，我想显示像这样的点（我通过中间单元格中的 div 实现此目的。然后我设置 div 宽度并添加类“cut-text”。但是没有第三个单元格。）

也许有人可以帮助我。

亲切的问候。