В SE есть несколько вопросов об этой проблеме в Bootstrap 3, которые были решены путем добавления пользовательского класса.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>
Есть несколько других вопросов, которые предлагают вам поместить текст внутрьпромежуток, чтобы это работало.Но это тоже не работает.
<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>
Но все же текст отображается полностью без elipsis.
Во всех случаях я имеюпроверьте элемент, чтобы убедиться, что он выбирает класс text-truncate и применяются стили, и они есть.
Это работает:
<tr>
<td data-bind="text: text()" class="text-truncate" style="max-width: 200px"></td>
</tr>
Но я бы предпочелпридерживаться классов Bootstrap.Какой правильный набор элементов и классов, чтобы заставить это работать?