在 HTML 表格中自动换行

Question

我一直在使用 word-wrap: break-word 将文本包装在 div s 和 span s 中。但是，它似乎不适用于表格单元格。我有一个表设置为 width:100% ，有一行和两列。列中的文本虽然采用上述 word-wrap 样式，但不会换行。它会导致文本越过单元格的边界。这发生在 Firefox、Google Chrome 和 Internet Explorer 上。

这是源代码的样子：

 td {
  border: 1px solid;
}

 <table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

上面的长词比我页面的边界大，但它并没有破坏上面的 HTML。我尝试了以下添加 text-wrap:suppress 和 text-wrap:normal 的建议，但都没有帮助。

原文由 psychotik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下在 Internet Explorer 中对我有用。注意添加了 table-layout:fixed CSS 属性

 td {
  border: 1px solid;
}

 <table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

原文由 Marc Stober 发布，翻译遵循 CC BY-SA 3.0 许可协议