为什么自动换行不起作用？

Question

My word-wrap is not working at all

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

The string is not breaking and is always in one line.

I already tried all solutions from Word Wrap not working properly but still not working

Answer 1

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> 

Answer 2

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!