Question

我有这个DIV

<div style="width:500px;"> </div>

我在其中插入了一张表

<table style="width:100%;">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

如果<td></td>包含正常单词，即使100个单词之间有空格，那么表格将在div中保持其大小，但如果单元格包含1个单词，其中包含100个字母，那么表格将采用在其父div之外的更大尺寸，overflow:hidden;可以隐藏表格的放大，但我希望大小保持不变，并且单元格会在height中增长，就像通常使用普通单词一样。

Answer 1

word-wrap是旧的IE特定CSS规则。要在现代浏览器中进行自动换行，请使用white-space。此外，设置max-width似乎有助于让事情顺利进行。

td {
  border: 1px solid black;
  width: 100px;
  max-width: 100px;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}

jsFiddle DEMO

Answer 2

将表格的max-width设置为绝对值，由parent div指定。

尝试：

<table style="width:100%; max-width:500px;">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

Answer 3

使用CSS word-wrap属性：

td {
     word-wrap: break-word;
}

如何禁用表格大小调整HTML中的大字

3 个答案: