Bootstrap 4 文本截断在表格单元格中不起作用

Question

在Bootstrap 3中有几个关于这个问题的问题，已经通过添加自定义类解决了。 Bootstrap 4 包含一个 text-truncate class 来限制元素内文本的显示。我们已经在网站的某些部分使用它，没有问题。

但是，它在应用于表格单元格时不起作用。以下是我们尝试的方法 - 实际上，表格中有多个列，但我已将其缩减为一列。

<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 上。都不行。

另一个常见的建议是添加文本类。尽管这似乎不是 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 类。什么是正确的元素和类集才能让它工作？

Answer 1

AFAIK 如果表格列具有流动宽度，则没有 Bootstrap 类可以解决此问题。最简单的解决方案是使用：

.table {
    table-layout: fixed;
}

https://www.codeply.com/go/NysJfvWtst