如何在 jquery 数据表上包装文本？答案

【问题标题】：How can I wrap text wrapping on a jquery datatable?如何在 jquery 数据表上包装文本？
【发布时间】：2019-08-30 14:00:22
【问题描述】：

我试图在数据表的帮助下显示一些长文本，但不知何故它没有被包装。这意味着我没有得到多行文本，而是得到一长行。当我去我的数据库并编辑我的描述字段（字段类型是文本）时，我可以在多行中看到文本。

我已经尝试将表格的宽度固定为 100%，但是文本行一直在表格之外。我还尝试添加 word-wrap 和 flex-wrap，并在我的 CSS 上定义一个 text-wrap 类，但它也不起作用。

知道如何解决这个问题吗？

  <div style="font-size:18px;">
    <table class="table-striped table-hover" id="product_table" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Group</th>
          <th>Price</th>
          <th>Action</th>
          <th class="none">Description DE</th>
          <th class="none">Description EN</th>
          <th class="none">Description ES</th>
        </tr>
      </thead>
      <tbody>
        @foreach($ProductList as $product)
        <tr>
          <td>{{$product['ProductName']}}</td>
          <td>{{$product['ProductGroupName']}}</td>
          <td>{{$product['ProductListPrice']}}</td>
          <td ><button class="btn btn-primary waves-effect w-md waves-light w-sm-5" data-toggle="modal" data-target="#Edit" data-id="{{$product['ProductID']}}" data-name="{{$product['ProductName']}}" data-group="{{$product['ProductGroupName']}}"
              data-price="{{$product['ProductListPrice']}}" data-descde="{{$product['ProductDescriptionDE']}}" data-descen="{{$product['ProductDescriptionEN']}}" data-desces="{{$product['ProductDescriptionES']}}">Edit</button>
          <td>{{$product['ProductDescriptionDE']}}</td>
          <td>{{$product['ProductDescriptionEN']}}</td>
          <td>{{$product['ProductDescriptionES']}}</td>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#product_table').DataTable({
        columnDefs: [{
          "className": "dt-center",
          "targets": "_all"
        }],
        pageLength: 50,
        responsive: true
      });
    });
  </script>

【问题讨论】：

标签： jquery laravel datatables

【解决方案1】：

尝试在您的表中添加wrap 类。

<table class="table-striped table-hover wrap" id="product_table" cellspacing="0" width="100%">

https://datatables.net/forums/discussion/43760/force-datatable-to-wrap-text#Comment_115199

【讨论】：

我一开始就试过了，但是没有用。但我已经找到了解决问题的方法。谢谢！
如果您的数据表版本大于 1.10.1，它应该可以工作。不客气。

【解决方案2】：

没关系，我发现了我的错误。 CSS 类不正确。课程应该是这样的：

.text-wrap{
    white-space:normal;
}

【讨论】：

【解决方案3】：

这是我的解决方案，它适用于各种桌子：

table.dataTable tbody td {
  word-break: break-word; word-break: break-all; white-space: normal;
}

【讨论】：