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 {&nbsp; border: 1px solid;}<table style="table-layout: fixed; width: 100%">&nbsp; <tr>&nbsp; &nbsp; <td style="word-wrap: break-word">&nbsp; &nbsp; &nbsp; LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord&nbsp; &nbsp; </td>&nbsp; </tr></table>

Answer 2

<td&nbsp;style="word-break:break-all;">longtextwithoutspace</td>或<span&nbsp;style="word-break:break-all;">longtextwithoutspace</span>

Answer 3

很长的机会，但要反复检查火虫(或类似的)您不会意外继承以下规则：white-space:nowrap;这可能会覆盖指定的断行为。