Question

我的自动换行不起作用

＆＃13;

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

＆＃13;

字符串没有断开，总是在一行中。

我已经尝试过Word Wrap not working properly的所有解决方案但仍然没有工作

Answer 1

您需要在表格中添加table-layout: fixed;：

＆＃13;

table {width:100%; table-layout: fixed;}
table td {word-wrap:break-word;}

＆＃13;

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

＆＃13;

Answer 2

尽管答案已经被接受，但我想在接受的答案之外添加

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

您需要确保空白属性未设置为 nowrap 或 pre 。

即使您应用自动换行：断词，这也可以防止td内容自动换行

如果其他一些CSS样式设置了td空格属性，则可以添加

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

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

希望它对某人有帮助！

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

2 个答案: