Table does not break the line

Question

Here’s what I’m using a table from the site: Datatables and here’s the deal:

As you can see the text gets all in line which makes it difficult to read because you have to scroll my doubt is how do I make it to make automatic paragraphs or is with the table break the line.

<div class="card-block">
   <div class="dt-responsive table-responsive">
        <table id="basic-btn" class="table table-striped table-bordered">
            <thead>
               <tr>
                 <th>ID</th>
                 <th>Nome do Cliente</th>
                 <th>Serial Number</th> 
                 <th>Fabrincante</th>
                 <th>Modelo</th>
                 <th>Avaria</th>
                 <th>Causa</th>
                 <th>Relatório</th>
                 <th>Data</th>
                 <th>Num Obra</th>
                 <th style="min-width:80px;">Ação</th>
               </tr>
           </thead>
           <tbody>
             <tr>
                  <td>1</td>
                  <td>Exemplo/td>
                  <td>Exemplo</td>
                  <td>Exemplo</td>
                  <td>Exemplo</td>
                  <td>Exemplo</td>
                  <td>Exemplo</td>
                  <td style="word-wrap:break-word"> </td>
                  <td>Exemplo</td>
                  <td>Exemplo</td>
                  <td style="vertical-align: middle;">
                     <button type="button" class="btn btn-info edit" data-toggle="modal" data-target="#modalEditar"><i class="fa fa-edit fa-lg"></i></button>
                     <button type="button" data-toggle="modal" data-target="#awesome-modal" class="btn btn-danger md-effect-1 apagar"><i class="fa fa-trash fa-lg"></i></button>
                  </td>
               </tr>
         </tbody>
       </table>
    </div>
 </div>

Answer 1

You can use white-space to break long strings. Datatables does not have a specific style for this. You can add a CSS on the page to the table by id:

#basic-btn tr td{
    white-space: pre-wrap;
}

Or via jQuery:

$("#basic-btn tr td").css("white-space","pre-wrap");

Answer 2

Just set the table to table-layout:fixed and all the td for word-wrap:break-word

Like the DataTables I used the following code for the table:

<table id="example" class="display dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;table-layout:fixed">

Detail for: table-layout:fixed

I created a css style for td:

<style>
  td{
       word-wrap:break-word;
    }
</style>

Upshot:

Answer 3

In this specific case, the break did not happen because it was understood that there was only one word, no spaces. Try to put some spaces, as if you were forming a sentence, then I believe that the datatable will do the automatic break of the line.