HTML表中的单词包装

Question

HTML表中的单词包装我一直在用word-wrap: break-word将文本包装在divS和span然而，它似乎在表单元格中不起作用。我有一张桌子width:100%，有一行和两列。列中的文本，尽管采用上述样式word-wrap不包。它会导致文本超出单元格的界限。这种情况发生在Firefox、GoogleChrome和InternetExplorer上。来源如下：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但两者都不起作用。

Answer 1

以下内容在InternetExplorer中适用于我。注意添加了table-layout:fixedCSS属性

td {

  border: 1px solid;

}

<table style="table-layout: fixed; width: 100%">

  <tr>

    <td style="word-wrap: break-word">

      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord

    </td>

  </tr>

</table>

Answer 2

<td style="word-break:break-all;">longtextwithoutspace</td>

或

<span style="word-break:break-all;">longtextwithoutspace</span>

Answer 3

很长的机会，但要反复检查火虫(或类似的)您不会意外继承以下规则：

white-space:nowrap;

这可能会覆盖指定的断行为。