Как я могу обернуть текст в JQuery DataTable?

Question

Я пытаюсь отобразить какой-нибудь длинный текст с помощью таблицы данных, но почему-то это не переносится.Это означает, что вместо того, чтобы получать несколько строк моего текста, я просто получаю длинную строку.Когда я захожу в свою БД и редактирую свое поле Описание (тип поля - текст), я вижу текст в несколько строк.

Я уже пытался установить ширину таблицы на 100%, но затем текстЛиния просто продолжает выходить за пределы стола.Я также попытался добавить перенос слов и flex-перенос, а также определить класс переноса текста в моем CSS, но он также не работал.

Есть идеи, как мне решить эту проблему?

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

Answer 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

Answer 2

Неважно, я нашел свою ошибку.Класс CSS не был правильным.Вот как должен быть класс:

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