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

Question

我的自动换行完全没有用

<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>

字符串没有断开,总是在一行中.

我已经尝试过Word Wrap中的所有解决方案都无法正常工作 但仍无法正常工作

Answer 1

您需要添加table-layout: fixed;到表中:

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

虽然答案已被接受，但我想补充一点，除了

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

您需要确保white-space属性未设置为nowrap或pre。

即使您应用自动换行，这也可以防止您的 td 内容自动换行：break-word

如果其他一些 css 样式正在为您设置 td white-space 属性，您可以添加

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

这将确保您的 td 内容具有正确的自动换行。

希望它可以帮助某人！