如果字符数超过 200，请在 bootstrap table 中使用省略号

Question

如果列中的字符数超过 200，我想隐藏文本。我想将此条件应用于 table 中的所有列。

<table
  id="table"
  data-toolbar="#toolbar"
  data-search="true"
  data-show-refresh="true"
  data-show-toggle="true"
  data-show-fullscreen="true"
  data-show-columns="true"
  data-show-columns-toggle-all="true"
  data-detail-view="true"
  data-show-export="true"
  data-click-to-select="true"
  data-detail-formatter="detailFormatter"
  data-minimum-count-columns="2"
  data-show-pagination-switch="true"
  data-pagination="true"
  data-id-field="id"
  data-page-list="[5, 10, 25, 50, 100, all]"
  data-show-footer="true"
  data-response-handler="responseHandler">
  <thead>
    <tr>
      <th data-field="upload_date" data-sortable="true">Date</th>
      <th data-field="product_code" data-sortable="true">Code</th>
      <th data-field="Title" data-sortable="true">Title</th>
      <th data-field="Description" data-sortable="true">Description</th>
    </tr>
  </thead>
</table>

Answer 1

我找到了一个使用 Bootstrap Table 插件提供的 data-formatter 属性的示例。

我定义了一个函数，当文本超过一定数量的字符时，它会去除文本。

您可以找到一个这样的例子 here。

将此添加到您要设置限制的列中：

data-formatter="shortingText"

最后，创建所需的格式化函数，并将字符限制设置为您喜欢的。

function shortingText(value) {
    if(value.length <= 50) {
        return value;
    }
    
    return value.substring(0, 50) + '...';
 }

请参阅 here 进一步阅读。

如果字符数超过 200，请在 bootstrap table 中使用省略号

Use ellipsis in bootstrap table if number of characters exceeds 200

css

bootstrap-4

bootstrap-table