HTML表中的换行 [英] Word-wrap in an HTML table

问题描述

我一直使用 word-wrap：break-word 在 div s和 span s。然而，它似乎不工作在表单元格。我有一个表设置为 width：100％，一行和两列。列中的文本虽然用上述换行样式，但不换行。它使文本超过单元格的边界。这发生在Firefox，Google Chrome和Internet Explorer上。

I've been using word-wrap: break-word to wrap text in divs and spans. 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.

源代码如下：

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>

大于我的页面的边界，但它不会打破上面的HTML。我试过下面的建议添加 text-wrap：suppress 和 text-wrap：normal 。

"Long Content" is larger than the bounds of my page, but it doesn't break with the above HTML. I've tried the suggestions below of adding text-wrap:suppress and text-wrap:normal, but neither helped.

推荐答案

以下工作适用于Internet Explorer。注意添加 table-layout：fixed CSS属性

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>

这篇关于HTML表中的换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！