wrap in an HTML table

I've been using word-wrap: break-word to wrap text in div s and span s. However, it doesn't seem to work in table cells. I have a table set to width:100% , with one row and two columns. Text in columns, although styled with the above word-wrap , doesn't wrap. It causes the text to go past the bounds of the cell. This happens on Firefox, Google Chrome and Internet Explorer.

Here's what the source looks like:

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>

---

The following works for me in Internet Explorer. Note the addition of the table-layout:fixed CSS attribute

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>

---

A long shot, but double-check with Firebug (or similar) that you aren't accidentally inheriting the following rule:

white-space:nowrap;

This may override your specified line break behaviour.

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

上一篇: 隐藏滚动条，但仍然可以滚动

下一篇: 包装在HTML表格中