Why is word-wrap not working?

Although the answer has been accepted, I would like to add to the accepted answer that apart from

table td {word-wrap:break-word;}

you need to ensure that the white-space property is not set to nowrap or pre.

This can prevent your td content word-wrapping even if you apply word-wrap: break-word

If some other css styles is setting you td white-space property, you can add

table td {
word-wrap:break-word;
white-space: normal;
}

This will ensure your td content has proper word-wrapping.

Hope it helps someone!


You will need to add table-layout: fixed; to the table:

table {width:100%; table-layout: fixed;}
table td {word-wrap:break-word;}
<table>
   <thead>
      <tr>
         <th>very long word</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>ablkasd/123123123/agsdfasdf/asdfasdfasdf/_sdfsdfsdf{123123-14werwwer-14124124-wefweshtsdf-235232323}/3235235/dasasdfasdfasdf.bsfs</td>
      </tr>
   </tbody>
</table>

Tags:

Html

Css