关于Bootstrap 3中的这个问题，SE上有几个问题，这些问题已经通过添加一个自定义类得到了解决。Bootstrap 4包括一个文本截断类，用于限制元素内文本的显示。我们已经在网站的某些部分使用了它，没有问题。
然而，当应用到表格单元格时，它不起作用。下面是我们尝试的-实际上，表格中有多个列，但我将其缩减为一个。

<table class="table table-striped table-bordered table-hover table-hover-cursor" id="tblData">
<thead class="thead-light">
<tr>
  <th scope="col" data-bind="tableSort: { arr: _data, propName: 'text()'}">Text</th>
</tr>
</thead>
<tbody data-bind="foreach: pagedData">
    <tr>
        <td data-bind="text: text()" class="text-truncate"></td>
    </tr>
</tbody>
</table>

关于这个问题还有很多其他的问题，建议你需要把文本放在一个span中才能让它工作，但是这也不起作用。

<tr>
    <td>
      <span data-bind="text: text()" class="text-truncate"></span>
    </td>
</tr>

我也试过把类移到td上，并在td和span上都有它，但都不起作用。
另一个常见的建议是添加text类。虽然这似乎不是Bootstrap中的默认类。这也不起作用。

<tr>
    <td>
      <span data-bind="text: text()" class="text text-truncate"></span>
    </td>
</tr>

同样，在td上移动或复制类不会有任何区别。我不确定是否需要大小限制，所以我尝试了这个：

<tr>
    <td data-bind="text: text()" class="col-md-2 text-truncate"></td>
</tr>

但文本仍然显示完整，没有省略号。
在所有情况下，我都检查了元素，以确保它选择了text-truncate类，并应用了样式，它们确实被应用了。
这确实有效：

<tr>
    <td data-bind="text: text()" class="text-truncate" style="max-width: 200px"></td>
</tr>

但是我更喜欢使用Bootstrap类。要让它工作，正确的元素和类集合是什么？