Как я могу обернуть перенос текста в таблицу данных jquery?

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

Я уже пытался установить ширину таблицы на 100%, но тогда текстовая строка продолжает выходить за пределы таблицы. Я также пытался добавить перенос слов и гибкий перенос и определить класс переноса текста в своем 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>