包装在HTML表格中

我一直在使用word-wrap: break-word来包装divspan的文本。 但是,它似乎不适用于表格单元格。 我有一个表设置为width:100% ,一行两列。 列中的文本虽然使用上述word-wrap进行了样式word-wrap ,但不包装。 它会导致文本超出单元格的边界。 这发生在Firefox,Google Chrome和Internet Explorer上。

以下是源代码的样子:

td {
  border: 1px solid;
}
<table style="width: 100%;">
  <tr>
    <td align="left">
      <div style="word-wrap: break-word;">Long Content</div>
    </td>
    <td align="right"><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

以下在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>

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

要么

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

一个长镜头,但仔细检查与Firebug(或类似),你不是不小心继承了以下规则:

white-space:nowrap;

这可能会覆盖您指定的换行符。

链接地址: http://www.djcxy.com/p/15469.html

上一篇: wrap in an HTML table

下一篇: DIVs vs. TABLEs a rebuttal please