CODEWITHSUNDEEP
htmlcsshtml-table
spez
spez

Reputation: 469

text out of table when text is long, even after adding word break

I have table the when text is long it's going out of table:

enter image description here

here the code

<div class="modal-body" style="word-wrap: break-word;">
  <table id="foldersTable" class="table-hover" style=" border-collapse: collapse;   table-layout: fixed; ">
    <tbody>
      <tr style="  word-wrap: break-word;">
        <td style="word-break:  break-word;"><i style="margin-right: 8px;" class="fa fa-folder"></i>
          <h2>aa</h2>
        </td>
      </tr>
      <tr style="  word-wrap: break-word;">
        <td style="word-break:  break-word;"><i style="margin-right: 8px;" class="fa fa-folder"></i>
          <h2>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h2>
        </td>
      </tr>
      <tr style="  word-wrap: break-word;">
        <td style="word-break:  break-word;"><i style="margin-right: 8px;" class="fa fa-folder"></i>
          <h2>b</h2>
        </td>
      </tr>
      <tr style="  word-wrap: break-word;">
        <td style="word-break:  break-word;"><i style="margin-right: 8px;" class="fa fa-folder"></i>
          <h2>cc</h2>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 0

Views: 110

Answers (1)

Pritesh
Pritesh

Reputation: 337

For word-wrap to work you should provide some width to td element and when data is more than that width it will start applying word-wrap with break-word, also you don't need to use word-wrap attribute on each and every element just use it on td and still it will work fine.

Upvotes: 1

Related Questions