时间戳

首页 > 解决方案 > 如果字符数超过 200，则在引导表中使用省略号

css - 如果字符数超过 200，则在引导表中使用省略号

问题描述

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

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

标签： cssbootstrap-4bootstrap-table

解决方案

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

我定义了一个函数，如果它超过一定数量的字符，它会剥离文本。

你可以在这里找到一个例子。

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

data-formatter="shortingText"

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

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

请参阅此处以进一步阅读。

推荐阅读