Many questions on SE address this particular issue in Bootstrap 3 and have found solutions by adding a custom class. In Bootstrap 4, a text-truncate class was introduced to restrict the display of text within an element, and we have successfully implemented it in various parts of our site.
However, we encountered a problem when applying the text-truncate class to a table cell. Here's what we attempted - although in reality, there are multiple columns in the table which I have condensed to one for demonstration purposes.
<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>
Several other suggestions mention enclosing the text in a span to achieve the desired effect, but this approach also proved unsuccessful.
<tr>
<td>
<span data-bind="text: text()" class="text-truncate"></span>
</td>
</tr>
We even experimented with moving the class to the td or using it on both the td and the span, but none of these methods yielded the desired result.
An oft-recommended suggestion is to include the text class, even though it is not a default Bootstrap class. However, this strategy did not work either.
<tr>
<td>
<span data-bind="text: text()" class="text text-truncate"></span>
</td>
</tr>
Despite trying different combinations and variations of classes and elements, including attempts to set size limitations, such as:
<tr>
<td data-bind="text: text()" class="col-md-2 text-truncate"></td>
</tr>
The text continued to display in full without any ellipsis or truncation.
Ultimately, we resorted to explicitly setting a max-width style to achieve the desired effect:
<tr>
<td data-bind="text: text()" class="text-truncate" style="max-width: 200px"></td>
</tr>
However, we would prefer to adhere to using only Bootstrap classes. What combination of elements and classes should be used to resolve this issue?