Question

关于Bootstrap 3中此问题的SE上有几个问题，已通过添加自定义类解决了。引导程序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>

还有其他有关此问题的建议，建议您将文本放在跨度内才能起作用。但这也不起作用。

<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>

但是文本仍然完整显示，没有省略号。

在所有情况下，我都检查过该元素以确保它拾取了文本截断类，并且正在应用样式。

这确实有效：

<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

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

1 个答案: